js+html5获取用户地理位置信息并在Google地图上显示的方法

2024-09-28 16:20:35

本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
 {
 if (navigator.geolocation)
  {
  navigator.geolocation.getCurrentPosition(showPosition,showError);
  }
 else{x.innerHTML="Geolocation is not supported by this browser.";}
 }
function showPosition(position)
 {
 var latlon=position.coords.latitude+","+position.coords.longitude;
 var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
 +latlon+"&zoom=14&size=400x300&sensor=false";
 document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
 }
function showError(error)
 {
 switch(error.code)
  {
  case error.PERMISSION_DENIED:
   x.innerHTML="User denied the request for Geolocation."
   break;
  case error.POSITION_UNAVAILABLE:
   x.innerHTML="Location information is unavailable."
   break;
  case error.TIMEOUT:
   x.innerHTML="The request to get user location timed out."
   break;
  case error.UNKNOWN_ERROR:
   x.innerHTML="An unknown error occurred."
   break;
  }
 }
</script>
</body>
</html>

希望本文所述对大家的web程序设计有所帮助。

JavaScript地理位置信息API

对于一个Web开发程序员来说,开发工作中一个最有意思的方面就是获取地理位置信息:试想一下,浏览你的网页的用户是在什么地方?程序员可以根据用户的地理位置信息来调整网站的语言.特定产品介绍等.下面我们将要演示的就是通过浏览器里JavaScript地理位置信息API来获取详细地理信息! 检查你的浏览器是否支持地理位置信息API 目前主流的浏览器都已经对JavaScript地理位置信息API有了较好的支持.但如果你还不放心,那么,确认地理位置信息API支持情况最好的方式是浏览器的功能特征测试. if("
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解

首先引入JavaScript API文件 <script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script> 此API提供的接口共有6个,geoip_country_code(){国家代码},geoip_country_ name(){国家名称},geoip_city() {城市名称},geoip_region(){地区代码},geoip_latit
js实现百度地图定位于地址逆解析，显示自己当前的地理位置

话不多说,随小编一起看看实例代码吧 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type=&qu
Node.js和PHP根据ip获取地理位置的方法

一.Node.js实现代码复制代码代码如下: var http = require('http');var util = require('util'); /** * 根据 ip 获取获取地址信息 */var getIpInfo = function(ip, cb) { var sina_server = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip='; var url = sina_ser
JS获取当前地理位置的方法

本文实例为大家分享了JS获取当前地理位置方法的具体代码,供大家参考,具体内容如下 1.手机定位 var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数,errorFunc获取定位失败回调 //首先设置默认城市 var defCity = { id: '000001', name: '北京市', date: curDateTime()//获取当前时间方法 }; //默认城市 $.cookie('VP
js实现PC端根据IP定位当前城市地理位置

话不多说,请看代码: <script type="text/javascript"> $.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js', function(_result) { if (remote_ip_info.ret == '1') { alert('国家:' + remote_ip_info.country +'\n省:' + remote_ip_info.provi
微信js-sdk地理位置接口用法示例

本文实例讲述了微信js-sdk地理位置接口用法.分享给大家供大家参考,具体如下: 前提,已经在wx.config()中权限验证通过,官方文档地址官方api 使用微信内置地图查看位置接口 wx.openLocation({ latitude: 0, // 纬度,浮点数,范围为90 ~ -90 longitude: 0, // 经度,浮点数,范围为180 ~ -180. name: '', // 位置名 address: '', // 地址详情说明 scale: 1, // 地图缩放级别,整形值,
使用JS获取当前地理位置方法汇总

今年的项目开发中,初步接触了移动端WEB开发,也就边学习HTML5边开发,主要使用了JQuery Mobile技术,发现这个不适合做互联网产品,大部分样式都需要重写,只用了部分功能.手机端WEB开发过程中第一次接触了定位功能,通过各大搜索引擎发现手机端定位都是通过浏览器的定位,而用在PC端浏览器第一次会弹出提示"是否开启定位功能",Boss看到这个提示,却觉得对用户的体验效果不好,不好那我换一种方式实现不就好了,这又不是多大的事,而Boss的脸色就大变,就说:不应该有这样的体验.我们这
Angularjs自定义指令实现三级联动选择地理位置

Angularjs自定义指令实现三级联动效果,先上图代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo
百度地图api应用标注地理位置信息(js版)

有时做了一些东西没有记录,而过一段时间再看的时候,有会忘记了.需要在重新在看一遍. 百度地图javascript api可以参考 http://developer.baidu.com/map/reference/ 示例:http://developer.baidu.com/map/jsdemo.htm 更多百度地图的介绍http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/ 里面介绍的非常详细. 弄了一个百度地图来标注地理位置信息

js+html5获取用户地理位置信息并在Google地图上显示的方法

相关推荐

随机推荐