淺談百度地圖API的坑

小豬愛上佩奇發表於2018-10-15
地圖API

我們可以使用百度地圖生成器生成地圖碼（功能開發 還是使用官方文件吧）
注意百度地圖坑
1、地圖和我們申請的ak碼版本問題 （解決方案：推薦大家使用2.0）
遠端連結：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak碼"></script>
2、百度地圖正確演示 卻無法正常顯示地圖圖形 （解決方案：多半都是百度地圖的範圍大小問題 推薦設定 13 儲存的時候 最好儲存詳細地址 然後獲取詳細地址的經緯度）

3、資料庫經緯度小數設定（推薦型別 float 如果實在覺得麻煩 可以直接設定varchar型別 ）

4、百度地圖 API JavaScript前端 物件生成

<script type="text/javascript">
  //建立和初始化地圖函式：
  function initMap(){
    createMap();//建立地圖
    setMapEvent();//設定地圖事件
    addMapControl();//向地圖新增控制元件
    addMapOverlay();//向地圖新增覆蓋物
  }
  function createMap(){ 
    map = new BMap.Map("map"); 
    map.centerAndZoom(new BMap.Point({$sellerRow[`lng`]},{$sellerRow[`lat`]}),13);
  }
  function setMapEvent(){
    map.enableScrollWheelZoom();
    map.enableKeyboard();
    map.enableDragging();
    map.enableDoubleClickZoom()
  }
  function addClickHandler(target,window){
    target.addEventListener("click",function(){
      target.openInfoWindow(window);
    });
  }
  function addMapOverlay(){
  }
  //向地圖新增控制元件
  function addMapControl(){
    var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
    scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
    map.addControl(scaleControl);
    var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
    map.addControl(navControl);
  }
  var map;
    initMap();
</script>

相關文章