- 添加缩放控件
- 标记点+信息展示
- 输出当前点击的坐标,并且转换为地址输出
- 目前存在的问题:点击某一个新地点之后,地图转移标记点不转移
<!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 {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
width: 100%;
height: 90%;
overflow: hidden;
}
p {
margin-left: 5px;
font-size: 14px;
}
</style>
<script
type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=密钥"
></script>
<title></title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.417854, 39.921988);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
var opts = {
width: 200,
height: 100,
title: "海底捞王府井店",
enableMessage: true,
};
var infoWindow = new BMap.InfoWindow(
"地址:北京市东城区王府井大街88号乐天银泰百货八层",
opts
);
marker.addEventListener("click", function () {
map.openInfoWindow(infoWindow, point);
});
map.addEventListener("click", function (e) {
console.log(e.point.lng + "," + e.point.lat);
var geoc = new BMap.Geocoder();
geoc.getLocation(point,function(rs){
var addComp = rs.addressComponents;
console.log(addComp);
});
var marker = new BMap.Marker(point);
map.addOverlay(marker);
document.getElementById("allmap").value = e.point.lng+ "," + e.point.lat;
});
map.enableScrollWheelZoom(true);
var scaleCtrl = new BMap.ScaleControl();
map.addControl(scaleCtrl);
var zoomCtrl = new BMap.ZoomControl();
map.addControl(zoomCtrl);
</script>
