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

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

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

你可能感兴趣的:(js模块)