1.前台html位置准备
<div id="Sharingrouter">
<div id="container" ref="container"></div>
</div>
2.初始化加载高德地图
var aMap = new AMap.Map("container", {//存放地图的div的ref
resizeEnable: true,//是否可以缩放
zoom: 10 //地图显示的缩放级别
//features: ['bg'] //['bg', 'road', 'building', 'point'] 背景，道路，建筑，打点
});
aMap为当前高德地图对象
//地图加载完毕，地图的初始方法最好写在complete之后，避免获取不到地图元素
aMap.on('complete', function() {
aMap.setFitView();//自适应地图内的所有元素，如果只想自适应特定的元素，可以写在（）中
//为地图添加定位组件
aMap.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({//geolocation为全局变量，其他地方也会用到
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
buttonPosition: 'RB'
});
aMap.addControl(geolocation);
geolocation.getCurrentPosition();//获取当前地理位置
AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
});
//为地图添加层级变化事件
aMap.on('zoomchange', function(e) {
//地图层级变化，执行方法
})
//为地图注册click事件获取鼠标点击出的经纬度坐标
aMap.on('click', function(e) {
varmapTapLgtd = e.lnglat.getLng();
varmapTapLttd = e.lnglat.getLat()；
regeoCode([mapTapLgtd, mapTapLttd]);//获取当前点击点的地理位置信息，方法在下面
});
//为地图添加地区编码反编译组件
AMap.plugin('AMap.Geocoder', function() {
geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city: '全国'
})
});
/**
* 根据经纬度获取详细地址信息
*/
function regeoCode(lnglat) {
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete' && result.regeocode) {
nowAddress = result.regeocode.formattedAddress; //nowAddress为全局变量
} else {
mui.toast('根据经纬度查询地址失败');
}
});
}
WEB开发 高德地图应用 初始加载 地图定位 层级变化控制 根据经纬度获取详细地址信息 点击事件以及地图自适应
