本文主要是实现百度地图上标出指定位置的点,点击百度地图的覆盖物显示自定义的文本内容。具体如下图所示:
首先是页面部分,要先引入百度地图以及jQuery(jQuery不是必须,只是个人习惯)。
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=&v=2.0&services=false"></script>
这里的ak需要自己去申请,申请地址:http://lbsyun.baidu.com/apiconsole/key,也可以使用百度地图的旧版本:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
这个版本是不需要ak就可以直接使用的。另外页面还需要两个容器来存放地图和自定义的显示框。
<div id="companyMap" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<div id="map-address0" style="display:none">
<p>自定义内容</p>
<p>另一段自定义内容</p>
</div>
<script type="text/javascript">
$(function (){
mapPageInt();
});
</script>
这是个全屏的地图,可以调整companyMap的大小,需要注意的是companyMap的宽高必须有,否则默认都是为0。接下来是js的部分:
(function(global){
var companyMap;
companyMap = global.mapPage = {};
companyMap = {
map:null
}
})(this);
function mapPageInt(){
companyMap.map = new BMap.Map("companyMap");
companyMap.map.enableScrollWheelZoom();
var point = new BMap.Point(x,y);
companyMap.map.centerAndZoom(point, 9);
var infoWindow = new BMap.InfoWindow(document.getElementById("map-address0").innerHTML);
var marker = new BMap.Marker(point);
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
});
companyMap.map.addOverlay(marker);
}
new BMap.Map(“companyMap”)在指定的容器内创建一个地图实例。enableScrollWheelZoom()方法启用地图放大缩小功能,默认禁用。BMap.Point(x,y)这个就是要定位的点的位置,x和y是经纬度。addOverlay()方法将自定义的覆盖物置入地图。具体的百度地图接口文档地址:
http://developer.baidu.com/map/reference/index.php?title=Class:%E6%A0%B8%E5%BF%83%E7%B1%BB/Map
到这里就完成了百度地图添加覆盖物,以及点击覆盖物显示自定义内容的功能。