<!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>