【web端】百度地圖api

百度地圖js加載

頁面引入：

修改申請的密鑰：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>

下面的js跟css用於點擊建立的地圖標註彈窗信息框
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

 

// 百度地圖   經度 緯度 地址信息
        function showMap(Longitude, Latitude,address) {
            setTimeout(function () {//添加延時加載。解決問題地圖縮放
                var map = new BMap.Map("maps");
                var myCity = new BMap.LocalCity();
                myCity.get(function (res) {
                    map.centerAndZoom(res.center, res.level);
                });
                //根據經緯度添加地圖標籤
                if(Longitude!=""&&Longitude!=null&&Latitude!=null&&Latitude!=""){
                      var new_point = new BMap.Point(Longitude,Latitude);
                      var marker = new BMap.Marker(new_point);  // 建立標註
                      map.addOverlay(marker);    
                      map.centerAndZoom(new_point, 15);
                  //添加點擊標註彈窗
                      var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, address, {
                          title: "地址信息", //標題
                          width: 290, //寬度
                          height: 40, //高度
                          panel : "panel", //檢索結果面板
                          enableAutoPan : true, //自動平移
                          searchTypes :[
                          ]
                      });
                      marker.addEventListener("click", function(){          
                          searchInfoWindow3.open(marker);
                      });
                }
                map.enableScrollWheelZoom(true);
            }, 300);
        }