googlemaps API V3 之（一）浏览器定位

最新推荐文章于 2025-03-30 10:00:00 发布

海蓝色的天空

最新推荐文章于 2025-03-30 10:00:00 发布

阅读量1.1k

点赞数

分类专栏： GoogleMaps 文章标签：浏览器 api function chrome html5 手机

本文链接：https://blog.youkuaiyun.com/SeaBlue_Java/article/details/6651972

版权

GoogleMaps 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML5的Geolocation特性，用于实现浏览器地理定位，获取经纬度信息。大部分现代浏览器已支持此功能，包括手机浏览器Opera。尽管Chrome当时可能尚不支持手机定位，但即将推出的新版本将加入这一特性。通过navigator.geolocation.getCurrentPosition获取位置信息，并结合Google Maps API V3创建地图，设置中心坐标、比例尺和地图类型。在地图上添加定位点的Marker，并监听鼠标点击事件，展示用户当前位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于HTML5的一些新特性http://directguo.com/html5/#slide20

HTML5Geolocation浏览器地理定位，获得坐标

navigator.geolocation.getCurrentPosition(function(position) {

lat = position.coords.latitude;//获得经度

lon = position.coords.longitude;//获得纬度

}, function() {
handleNoGeolocation(browserSupportFlag);

});

浏览器兼容问题，基本上大多数新的浏览器可以支持浏览器定位了，目前手机浏览器operal可以进行手机定位，chrome浏览器还不行不过在不久，chrome推出的新版本浏览器将支持手机浏览器定位。浏览器定位的基本原理是分析ip，获得ip主要用于地图上。

//构造地图，mapOptions为地图的参数分别为中心坐标比例尺和地图类别，
var mapOptions = {
center: new google.maps.LatLng(lat,lon),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('divId'),mapOptions);

//添加定位点的marker（标注）

var markerOption = {
position: new google.maps.LatLng(24,118),
map: map
}
var marker = new google.maps.Marker(markerOption);

//添加标注marker对应的响应事件

google.maps.event.addListener(marker,'click',function(){
alert("您点击了您所在的位置");
});

需要特别说明的是gmaps的click事件在手机上或平板上是没有响应的，所以必须找替代的，如mouseup就可以了.....ok....so....next.....