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

最新推荐文章于 2025-04-15 22:49:17 发布

切图工

最新推荐文章于 2025-04-15 22:49:17 发布

阅读量8.6k

点赞数 5

分类专栏： js模块文章标签：百度地图覆盖物自定义文字 ak 覆盖物点击

本文链接：https://blog.csdn.net/xmy120/article/details/70144453

版权

js模块专栏收录该内容

18 篇文章

订阅专栏

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

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