1. 程式人生 > >引用百度地圖api二次載入地圖錯位

引用百度地圖api二次載入地圖錯位

所做的網頁需要有百度地圖的功能。

於是引用了百度地圖,但是在初始化地圖的時候遇到了一個問題。

初始化的地圖中心點不正確。所標記的定位如果是第一次載入的話,定位是正確的。

但如果沒有清快取就進行第二次載入的話,這個定位一開始雖然是在地圖的最中間,但是由於初始定位不正確,一開始標記的定位也不正確,但是當你拖動地圖,或者將地圖放大縮小時,你才發現標記的定位又會回到所需要的正確定位。

初始化地圖的中心在我所預想的定位的左下方。上網上查了一下,大多數的問題都是標記初始化在檢視左上方(0,0)處。跟我的問題不符合。

他們所說的dom問題,也不存在。

最後師姐給了我一個建議,使用非同步操作。最後終於成功了。

在初始化地圖的時候,point直接換成城市名字,就是正常的初始化地圖,那麼便是point的錯誤。

程式碼如下:

<script type="text/javascript">

// 百度地圖API功能

  var map = new BMap.Map("allmap");

var point = new BMap.Point(120.377841,30.3099);

setTimeout(function () {

    // f1的任務程式碼

    map.centerAndZoom(point, 15);

console.log(point)

map.enableScrollWheelZoom(true);

var marker = new BMap.Marker(point); // 建立標註

map.addOverlay(marker); // 將標註新增到地圖中

var opts = {

width : 200, // 資訊視窗寬度

height: 100, // 資訊視窗高度

title : "杭州軌物科技有限公司" , // 資訊視窗標題

enableMessage:true,//設定允許資訊窗傳送短息

}

var infoWindow = new BMap.InfoWindow("地址:地址", opts); // 建立資訊視窗物件

marker.addEventListener("click", function(){

map.openInfoWindow(infoWindow,point); //開啟資訊視窗

});

  }, 1000);

</script>