百度地图显示指定位置，点击显示自定义内容

来源：互联网发布：js正则表达式匹配数字编辑：程序博客网时间：2024/06/08 06:01

本文主要是实现百度地图上标出指定位置的点，点击百度地图的覆盖物显示自定义的文本内容。具体如下图所示：
标注位置，点击显示自定义内容
首先是页面部分，要先引入百度地图以及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

到这里我们就完成了百度地图添加覆盖物，以及点击覆盖物显示自定义内容的功能。

5 0