根據經緯度顯示地圖、地圖縮小偏移處理

 

這里我用的是百度地圖的api

 

首先要引入百度地圖的api

 

我用的是這個：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Vwdre4pcPNPffgYG6gMfgPbM2w9Ned9V"></script> 

 

之后就開始創建地圖

var map = new BMap.Map("mapContainer");// 創建地圖實例  mapContainer為地圖顯示div的id名
var point = new BMap.Point(longitude ,latitude );  // 創建點坐標   longitude,latitude為經緯度
map.centerAndZoom(point, 18);  //第一個參數是以剛才的點為中心創建地圖，第二個參數是地圖縮放級別，從小到大為0-19
map.enableScrollWheelZoom(true);  //利用鼠標滾輪控制大小   另外也可以使用map.setZoom()方法主動控制地圖放大縮小
                 
var myIcon = new BMap.Icon("../upload/images/2019/12/mapLocation.png", new BMap.Size(29, 42));    // 設置中心點圖片  第一個參數為中心點地標圖片，第二個參數為該圖片大小
var marker = new BMap.Marker(point,{icon: myIcon});   
var infoWindow = new BMap.InfoWindow("詳細信息：" + "<br><br>" + totalAddress);  //彈出窗口
marker.addEventListener("click", function(){           
      this.openInfoWindow(infoWindow);        
});
map.addOverlay(marker);
map.panBy(600, 250);   //設置中心點位置（該方法按需使用） 如果要將地圖顯示在彈出框，而標注的地點不在彈出框中心，可以使用此方法設置彈出框標注地點位置，參數相對於父標簽，這里是父級div寬高的一半

 

地圖創建完成可能與預想的有偏差，會出現一些問題：

 

1.對地圖進行放大縮小時，視圖可能會偏移，用戶體驗極差。

參考了別人的博客得知這個問題產生的原因主要是因為百度地圖加載的位置因為定位等原因，與整個html 頁面產生了不同步滾動的問題。

 

解決：

當地圖加載的時候執行

$(window).scrollTop(0);

也就是將父元素滾動到頁面最頂端，因為產生問題都是因為position:fixed; 所以就算滾動到最頂端，地圖也會加載在視圖中，之后縮放就正常了。

 

同樣的，在關閉地圖的時候要將視圖位置滾回之前所在的位置

$(window).scrollTop($(document).height());

這里根據自己需求確定滾回的距離，我的地圖在頁面底部，所以高度為  $(document).height()

 

2.地圖放大縮小后中心點偏移

解決：

在設置中心點的圖標對象時設置偏移位置

var myIcon = new BMap.Icon("../upload/images/2019/12/mapLocation.png", new BMap.Size(30, 42),{  //中心點圖標
    anchor: new BMap.Size(15, 40),  //這里有兩個數字15，40分別對應圖標的一半寬度和高度。但是圖片高度最好會故意設置高出2到3個像素
    infoWindowAnchor: new BMap.Size(15, 0)     //點擊后的彈出信息距離圖標位置
}); 

 

問題解決！

 

 

這里只是簡單的地圖，想用地圖更多功能請參考https://www.cnblogs.com/yfsmooth/p/4695831.html

本文參考：

1.https://www.cnblogs.com/yfsmooth/p/4695831.html；

2.https://www.cnblogs.com/Lmey/p/9342730.html；

3.https://blog.csdn.net/weixin_30667649/article/details/98887125