百度地圖顯示指定位置，點擊顯示自定義內容

    本文主要是實現百度地圖上標出指定位置的點，點擊百度地圖的覆蓋物顯示自定義的文本內容。具體如下圖所示：

    首先是頁面部分，要先引入百度地圖以及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

    到這裏就完成了百度地圖添加覆蓋物，以及點擊覆蓋物顯示自定義內容的功能。