1. 程式人生 > 實用技巧 >百度地圖BMap使用示例

百度地圖BMap使用示例

           引入百度map js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak"/>
           初始化百度地圖 
       map = new BMap.Map("mapdiv");
            map.centerAndZoom(new BMap.Point(108.768241, 34.408032), 5);
            map.enableScrollWheelZoom(true);
            map.addControl(
new BMap.NavigationControl());// 新增平移縮放控制元件 map.addControl(new BMap.ScaleControl()); // 新增比例尺控制元件 map.addControl(new BMap.OverviewMapControl()); //新增縮略地圖控制元件 var copyCtrl = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}); map.setMinZoom(
5); map.setMaxZoom(11); copyCtrl.addCopyright({ id: 1, content: "<span style='color:Red;font-size:16px;margin-right:10px;font-weight:bold'></span>" }); map.addControl(copyCtrl);
       //map風格 map.setMapStyle({style:
'light'}); var point = new BMap.Point("經緯度"); var marker = new BMap.Marker(point); marker.setIcon(new BMap.Icon("icon-path", new BMap.Size(24, 32))); //label樣式 var label = new BMap.Label("labcontent", {offset: new BMap.Size(25, -25)}); label.setStyle({ width: "120px;", color: "#fff", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: "微軟雅黑", background: "#676768", border: "1px solid '#ff8355'", borderRadius: "5px", textAlgin: "left", 'z-index': 999999 }); label.hide(); marker.setLabel(label); map.addOverlay(marker); marker.setAnimation(BMAP_ANIMATION_BOUNCE); var content = "";
       //點選標註顯示內容 addClickHandler(content, marker);
       //滑鼠懸浮顯示 addMarkerOverHandler(marker);

      

        function openInfo(content, e) {
          var p = e.target;
          var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
          var infoWindow = new BMap.InfoWindow(content);
          map.openInfoWindow(infoWindow, point);
        }

           //點選彈窗顯示

        function addClickHandler(content, marker) {
          marker.addEventListener("click", function (e) {
          openInfo(content, e)
          });
        }



        function addMarkerOverHandler(marker) {
          marker.addEventListener("mouseover", function (e) {
            marker.setTop(true);
            if (marker.getLabel()) {
              marker.getLabel().show();
            }
          });
          marker.addEventListener("mouseout", function (e) {
            marker.setTop(false);
              if (marker.getLabel()) {
                marker.getLabel().hide();
              }
          });
        }