百度地圖初使用

最近在做app，不過用的是公司的特殊框架，不是開發移動端的原生語言
有一個需要地圖的地方，遵循厲害的老闆的建議，選擇了百度地圖。。當然百度地圖有很好的開發文檔和實例，但是再清楚對於第一次用的我來說都是不清楚，開發的問題還是要總結一下

功能需求：
1、顯示當前定位
2、搜索地址定位
3、移動地圖，定位中心點

結果圖：

使用百度地圖的準備操作：
1、申請百度賬號、密鑰（我用的是web端的，密鑰的應用類別就選瀏覽器端就好）
2、引用

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=/*寫你申請的密鑰*/"></script>

3、init 地圖

	  // 百度地圖API功能， map_area是你放地圖div的id
      var map = new BMap.Map("map_area",{minZoom:15, maxZoom:20 });    // 創建Map實例

      var point = new BMap.Point(120.577019,31.879488);
      myVue.mk = new BMap.Marker(point);  // 就是地圖上的小圖標
      map.addOverlay(myVue.mk);
      map.panTo(point);
      map.centerAndZoom(point, 17);  // 初始化地圖,設置中心點座標和地圖級別

實現功能：
1、顯示當前定位
很想吐槽一下，現在百度提供給我們公用的地位是真的很不準，有些傷心。所以我採用的是通過phoneGap獲取手機的gps定位，然後將拿到的經緯度轉換成百度座標（特別申明，一定要準換，不要看轉換後值差別不大，但定位後差別很大），再進行定位。
大概代碼如下

	getCurrentPosition(map) {
      var myVue = this;
      // 設個初始值，萬一有些手機奇葩拿不到值，就尷尬了
      myVue.position.latitude = 31;
      myVue.position.longitude = 121;
      
      navigator.geolocation.getCurrentPosition(function showPosition(position){
          myVue.position.latitude = position.coords.latitude;
          myVue.position.longitude = position.coords.longitude;

          var convertor = new BMap.Convertor();
          var pointArr = [];
          var y = myVue.position.latitude;
          var x = myVue.position.longitude;
          var ggPoint = new BMap.Point(x,y);
          pointArr.push(ggPoint);
          convertor.translate(pointArr, 1, 5, function(data) {
            if(data.status === 0) {
              //開始在地圖上定位
              // myVue.mk = new BMap.Marker(data.points[0]);
              myVue.mk.point = data.points[0];
              map.addOverlay(myVue.mk);
              map.setCenter(data.points[0]);
              myVue.longitude = data.points[0].lng;
              myVue.latitude = data.points[0].lat;
              // alert('gps定位：您的位置：'+myVue.longitude+','+myVue.latitude);
            }
          });
          myVue.getAddr(myVue.position.longitude, myVue.position.latitude);

      }, function showError(error){
          $f7.data.alert('手機gps定位失敗');
          myVue.getAddr(myVue.position.longitude, myVue.position.latitude);
      });

    }

中間有一個getAddr方法是調用百度的api獲取該經緯度的地址

	getAddr(lng, lat) {
      var myVue = this;
      // 創建地理編碼實例
      var myGeo = new BMap.Geocoder();
      // 根據座標得到地址描述
      myGeo.getLocation(new BMap.Point(lng, lat), function(result){
        if (result){
          // 拿到地址，更新到頁面上去
          $('#addr').val(result.address);
        }
      });
    }

2、搜索地址定位
這個功能是直接調用百度的api，比較麻煩的一點就是如果你發現你放上去搜索沒有反應，且在搜索框搜索時，調試network那一欄是一直有反應的，那應該是你頁面的層級使你看不到下拉框，去調一調頁面的層級，應該就是ok了

	function G(id) {
        return document.getElementById(id);
      }

      var ac = new BMap.Autocomplete(    //建立一個自動完成的對象
      {
          "input" : "addr_search",  // input的id值
          "location" : map
      });

      // 搜索匹配
      var myValue;
      var searchStatus = false;
      ac.addEventListener("onconfirm", function(e) {    //鼠標點擊下拉列表後的事件
        searchStatus = true;
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        console.log(G);
        setPlace();
      });

      function setPlace(){
        map.clearOverlays();    //清除地圖上所有覆蓋物
        function myFun(){
          var pp = local.getResults().getPoi(0).point;    //獲取第一個智能搜索的結果
          myVue.set_location.meet_address = local.getResults().keyword;
          myVue.position.longitude = pp.lng;
          myVue.position.latitude = pp.lat;
          
          map.centerAndZoom(pp, 18);
          myVue.mk.point = pp;   // 我的標註使用的是全局變量，一值使用一個標註，所以採用這種寫法
          map.addOverlay(myVue.mk);
          setTimeout(function() {
            searchStatus = false;
          },1000);
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
      }

3、移動地圖，定位中心點
因爲在搜索定位後要加這個功能，所以地圖上的小紅點要一隻使用一個標識。

// 只需new一個就好了，設成全局變量，一直去使用它
myVue.mk = new BMap.Marker(point);
// 使用方法（pp爲一個對象，裏面是經緯度，如果你不知道他的格式是什麼樣的，就是試着打印出來吧，模仿着寫）
myVue.mk.point = pp;  
map.addOverlay(myVue.mk);

	// 地圖移動事件
	map.addEventListener("moveend",function(){
        if(myVue.mk && !searchStatus){
          // 標識定到中心點
          myVue.mk.setPosition(map.getCenter());
          myVue.position.latitude = map.getCenter().lat;
          myVue.position.longitude = map.getCenter().lng;
          myVue.getAddr(myVue.position.longitude, myVue.position.latitude);
        }
      });
      // 地圖放大縮小事件
      map.addEventListener("zoomend",function(){
        if(myVue.mk && !searchStatus){
          // 標識定到中心點
          myVue.mk.setPosition(map.getCenter());
          myVue.position.latitude = map.getCenter().lat;
          myVue.position.longitude = map.getCenter().lng;
          myVue.getAddr(myVue.position.longitude, myVue.position.latitude);
        }
      });

。。。。大致就這樣了，如果有些方法存在bug，請大家提出，好改正，謝謝 ^ ^