百度地图初使用

最近在做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，请大家提出，好改正，谢谢 ^ ^