前言:这次的功能就是选择地址,选择百度地图上的某个地方作为地址。
百度地图引入:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙"></script>
将地图定位点到当前位置:
var map= new BMap.Map('allmap'); // 创建Map实例
map.centerAndZoom(new BMap.Point(), 11); // 初始化地图,设置中心点坐标和地图级别,中心点可不设置
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(result){
//this.getStatus()具体的参数信息看官网sdk
if(this.getStatus() == BMAP_STATUS_SUCCESS){
let atitude = result.point.lat;//获取到的纬度
let longitude = result.point.lng;//获取到的经度
let mk = new BMap.Marker(result.point);//创建一个覆盖物
map.addOverlay(mk);//增加一个标示到地图上
map.panTo(result.point); //将中心点移动到该位置
getLocation(result.point)//额外操作
}else {
//获取位置失败
alert('获取位置失败');
}
});
功能:通过页面上固定的一个图标点,移动地图后获取该点的地址。
思路:监听map的dragend事件,拖拽停止后获取该固定点的坐标,通过api转换成经纬度,再通过经纬度获取该地址的信息。
//根据经纬获取地址信息
function getLocation(point) {
geoc.getLocation(point,function (rs) {
let addComp=rs.addressComponents,
province=addComp.province ,//省
city=addComp.city,//市
district=addComp.district,//区
street=addComp.street,//路
streetNumber = addComp.streetNumber //号
_self.pay.location=district+street+streetNumber
})
}
//拖动结束后
//获取图标的点位置,因为是固定点 ,不需要每次去获取
var imgleft=$(".location-bg").offset().left+12.5;
var imgtop=$(".location-bg").offset().top+38
map.addEventListener('dragend',function (e) {
//计算经纬度,该api就是将坐标转换成经纬度
let point=map.pixelToPoint({
x:imgleft,
y:imgtop
})
getLocation(point)
})
这样大致算完成了,还可以在地图移动过程中加点提示,
map.addEventListener('dragstart',function (e) {
_self.pay.location='正在获取接送地址...'
})