您的位置：首页 > 其它

百度地图获取定位，实现拖动marker定位，返回具体的位置名

2017-06-28 11:24 513 查看 
<!DOCTYPE html>
<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="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
.button-full{
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
height: 50px;
width: 100%;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #fff;
background: #333;
text-decoration: none;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ***Your ak"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
<a id="chosedBtn" class=" button-full">选择这个地址</a>
</body>
</html>


javascirpt

<script type="text/javascript">
//创建默认初始化Map实例
(function(){

mapObj = {
com: {
map : new BMap.Map("allmap"),
infoWindow :  new BMap.InfoWindow("正在载入..", {offset : new BMap.Size(20, -60)}),
icon: new BMap.Icon("__IMG__/locate.png", new BMap.Size(60, 60)),
iconOffsetSize: new BMap.Size(0, -30),
chosedAddr: ""
},

init: function(){
var _this = this;

_this.default();

_this.initLocation().then(function(result){
//清除掉默认的markerDefault
_this.com.map.clearOverlays()

var marker = result.mk;
var point = result.pt;

//取得当前位置的名字
_this.getAddrAccordingPoint(point).then(function(res){
_this.changeInfoWindowContent(res)
//打开信息窗体
_this.com.map.openInfoWindow(_this.com.infoWindow, point);
});

//绑定拖动结束事件，获取经纬度
marker.addEventListener("dragend", function(){
var curPoint = marker.getPosition();
console.log(curPoint)
//取得拖动后当前位置的名字
_this.getAddrAccordingPoint(curPoint).then(function(res){
_this.changeInfoWindowContent(res)
//打开信息窗体
_this.com.map.openInfoWindow(_this.com.infoWindow, curPoint);
});
});
marker.addEventListener("click", function(){
var curPoint = marker.getPosition();
_this.getAddrAccordingPoint(curPoint).then(function(res){
_this.changeInfoWindowContent(res)
//打开信息窗体
_this.com.map.openInfoWindow(_this.com.infoWindow, curPoint);
})
});
})
},

//默认打开地图的初始状态设置
default: function(){
var _this = this;
var point = new BMap.Point(114.062048, 22.54579);
// 设置初始化地图,设置中心点坐标和地图级别
_this.com.map.centerAndZoom(point, 12);

//设置初次打开时，markerDefault，定位初始完毕会被销毁
var markerDefault = new BMap.Marker(point);
_this.com.map.addOverlay(markerDefault);
markerDefault.setIcon(_this.com.icon);

//设置信息窗体宽度
_this.com.infoWindow.setWidth(220);
},

//獲取定位初始化地圖
initLocation: function (){
var _this = this;
return new Promise(function(resolve, reject){
new BMap.Geolocation().getCurrentPosition(function(r){
var lat = r.latitude;
var long = r.longitude;
var point = new BMap.Point(long, lat)

var marker = new BMap.Marker(point);
marker.setOffset(_this.com.iconOffsetSize)
marker.setIcon(_this.com.icon);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
var initObj = {
pt: point,
mk: marker
}

// 将标注添加到地图中
_this.com.map.addOverlay(marker);

//允许拖动
marker.enableDragging();
//不允许被clearOverlays方法清除
marker.disableMassClear();

//地图指向当前的点（平移动画）
_this.com.map.panTo(point);
// 初始化地图,设置中心点坐标和地图级别
_this.com.map.centerAndZoom(point, 16);

resolve(initObj);
})
})
},

//根据经纬度解析出位置的名称
getAddrAccordingPoint: function(point){
var _this = this;
return new Promise(function(resolve, reject){
new BMap.Geocoder().getLocation(point, function(result){
if (result){
if(!!result.surroundingPois[0]){
_this.com.chosedAddr = result.address + " " +result.surroundingPois[0].title;
}else{
_this.com.chosedAddr = result.address;
}
resolve(_this.com.chosedAddr)
}
});
})
},

//添加标注地址信息
changeInfoWindowContent: function(content){
var _this = this;
_this.com.infoWindow.setContent(content);
}
};

//开始地图
mapObj.init();

document.getElementById('chosedBtn').addEventListener('click', function(){
location.href = '<{:U("Channel/addChannelFollowLog")}>?address='+mapObj.com.chosedAddr
},false)

})()
</script>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航