一、前提
// 必要的JS API脚本 -----顺序同步加载方式
// dom--容器 注意要设置css宽高哦
二、js实现逻辑功能
创建地图，获取用户地理位置(3种方式)
1) 地图初始化加载定位到当前城市。
2) 浏览器定位。
3) IP定位获取当前城市信息
ps: 需求需要定位到具体的位置，以下主要是浏览器定位，1和3只定位到城市
// 1) 地图初始化加载定位到当前城市。 ps:只能获取到城市级别信息
var map = new AMap.Map('map_wrapper', {
resizeEnable: true,
zoom:20, //number 地图显示的缩放级别 : 3-20级
//zooms: [5,18] 地图显示的缩放级别范围 在PC上，默认为[3,18]，在移动设备上，默认为[3,19],
});
// 2) 浏览器定位。想获取到具体的位置就要借助浏览器定位,
// 高德JS API提供了AMap.Geolocation插件来实现定位
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位，默认：true
enableHighAccuracy: true,
// 设置定位超时时间，默认：无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: 'RB'
})
//addControl(obj:Object) 添加控件,可以是任何插件对象
map.addControl(geolocation);
//----
//getCurrentPosition(callback:function(status,result){})获取用户当前的精确位置信息
geolocation.getCurrentPosition(function(status,result) {
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
})
//或
//geolocation.getCurrentPosition()
//AMap.event.addListener(geolocation, 'complete', onComplete)
// AMap.event.addListener(geolocation, 'error', onError)
//----
function onComplete (data) {
// data是具体的定位信息
}
function onError (data) {
// 定位出错
}
})
本文地址：http://www.tpjde.com/quote/3307.html 推平第 http://www.tpjde.com/ , 查看更多