百度地图api和腾讯地图api的学习

使用vue + 百度地图api / 腾讯地图api；uni-app（微信小程序） + 百度地图api / 腾讯地图api；

先说一下本次使用的结论和遇到的问题

百度api ：提供小区边界的坐标位置信息，但是在小程序中使用的时候，百度返回的坐标经过加密，小程序端的api好像没有提供对应的解码方式，通过自己的计算解码后，坐标有偏移，不准确了；

腾讯地图api ：并没有提供街道级别以及以下的坐标边界信息，因此没办法画小区边界（可能是我没找到对应的api吧）；

百度地图api -- Web

这边绘制的整体思路是：首先绘制基本的地图，然后查询小区边界信息（先查小区uid，再查小区边界点的经纬度，然后绘制）。

1. 引入百度地图api

   首先需要注册申请一下百度地图的ak，注意申请的时候域的限制设置；此处按照官网进行就可以了，比较简单。

   然后引入我们的项目中，这边有两种引用的方式：

   a. 直接在public（或者根目录下）的index.html文件中增加：

   <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></script> 
   

   b. 使用vue-baidu-map

   这边我使用的是第二种方式。首先执行一下

   npm install vue-baidu-map
   

   然后在main.js文件中引入一下

   import BaiduMap from "vue-baidu-map";
   Vue.use(BaiduMap,{ 
       ak: '你的ak' 
   })
   

2. 绘制地图

   引入了vue-baidu-map之后呢，可以使用他的组件

       <baidu-map
           id="allmap"
           @ready="mapReady"
           :scroll-wheel-zoom="true"
       >
         <bm-polygon :key="keyword" :path="path" fill-color="#ff000029" strokeStyle="dashed" stroke-color="red" :stroke-opacity="0.5" :stroke-weight="2" />
       </baidu-map>
   

   这边关键的属性就是ready方法，里面的bm-polygon标签是绘制覆盖物的（不需要的可以去除），我们在这个方法内去做绘图的操作：

       mapReady({BMap, map}){ 
           this.map = map;
           this.BMap = BMap;
           this.point = new BMap.Point(109, 34.3);//初始化地图的中心点
           map.centerAndZoom(this.point, 12);//12是地图的缩放等级
       }
   

   至此一个简单的地图就绘制出来了；

3. 关键字查询

   百度地图提供了关键字联想查询的方法localSearch，我们可以查询回来搜索的关键字相关的地址，这些地址信息中包含了地点对应的uid。然后我们拿着uid，通过提供的api查询所需的地址信息。

       function myFun() {
         var firstPoint = local.getResults().getPoi(0).point; 
         var uid = local.getResults().getPoi(0).uid;    //获取第一个智能搜索的结果的uid，进一步查询该点的坐标边界
         map.centerAndZoom(local.getResults().keyword);
         map.addOverlay(new BMap.Marker(firstPoint));    //添加标注   
         
         //这里写一个通过uid查询的方法就好啦
       }
   
       var local = new BMap.LocalSearch(map, { //智能搜索
         onSearchComplete: myFun
       });
       local.search(this.myValue);//对输入的关键字进行查询
   

   下面是查询小区信息的接口：

       "http://map.baidu.com/?pcevaname=pc4.1&qt=ext&ext_ver=new&l=12&uid=" + uid
   

   需要注意的是这边查到的坐标并不能够直接使用，需要进行转换，这里的geo就是边界的坐标数据，但是此处的坐标是百度百米制坐标，需要解析一下，转换成经纬度

       queryUid(uid, cb, q, pp) {
         const that = this;
         let map = this.map;
         let BMap = this.BMap;
         $.ajax({
           async: false,
           url: "http://map.baidu.com/?pcevaname=pc4.1&qt=ext&ext_ver=new&l=12&uid=" + uid,
           dataType: 'jsonp',//使用jsonp处理跨域
           jsonp: 'callback',
           success: function (result) {
             let content = result.content;//这里获取到了小区的相关信息
             if (null != content.geo && content.geo != undefined) {//如果查到了geo的相关信息，就进行绘制，否则使用百度自己的边界绘制方式（针对行政区级别的地址）
               let geo = content.geo;//这里的geo就是边界的坐标数据啦，但是此处的坐标是百度百米制坐标，需要解析一下，转换成经纬度
               let geoObj = that.parseGeo(geo);
               let points = that.coordinateToPoints(map, geoObj.points);
               //point分组，得到多边形的每一个点，画多边形
               if (points && points.indexOf(";") >= 0) {
                 points = points.split(";");
               }
               that.path = points;//修改polygon的points属性值，进行边界绘制
               let viewObj = map.getViewport(points)
               map.centerAndZoom(viewObj.center, viewObj.zoom); //缩放地图到合适的级别
               
             } else if (content.uid) {//行政区级别地址，边界绘制方式
               let bd = new BMap.Boundary();
               bd.get(q, function (rs) {
                 that.parsePath(rs.boundaries[0], pp)
               });
             }
           },
           timeout: 3000
         });
       },  
   

   下面是坐标解析的方式：

   我这边也是百度到的，具体没有细看，哈哈哈

       coordinateToPoints(map, coordinate) {
         let BMap = this.BMap;
         var points = [];
         if (coordinate) {
           let arr = coordinate.split(";");
           if (arr) {
             for (let i = 0; i < arr.length; i++) {
               let coord = arr[i].split(",");
               if (coord && coord.length == 2) {
                 let mctXY = new BMap.Pixel(coord[0], coord[1]);
                 let project = map.getMapType().getProjection();
                 let point = project.pointToLngLat(mctXY);
                 points.push(new BMap.Point(point.lng, point.lat));
               }
             }
           }
         }
         return points;
       },
       
       parseGeo(mocator) {
         if (typeof mocator != 'string') {
           return {};
         }
         let t = mocator.split("|");
         let n = parseInt(t[0]);
         let i = t[1];
         let r = t[2];
         let o = r.split(";");
         if (n === 4) {
           for (var a = [], s = 0; s < o.length - 1; s++) {
             "1" === o[s].split("-")[0] && a.push(o[s].split("-")[1]);
           }
           o = a;
           o.push("");
         }
         let u = [];
         switch (n) {
           case 1:
             u.push(o[0]);
             break;
           case 2:
           case 3:
           case 4:
             for (let s = 0; s < o.length - 1; s++) {
               let l = o[s];
               if (l.length > 100) {
                 l = l.replace(/(-?[1-9]\d*.\d*|-?0.\d*[1-9]\d*|-?0?.0+|0|-?[1-9]\d*),(-?[1-9]\d*.\d*|-?0.\d*[1-9]\d*|-?0?.0+|0|-?[1-9]\d*)(,)/g,
                     "$1,$2;");
                 u.push(l);
               } else {
                 for (var c = [], d = l.split(","), f = 0; f < d.length; f += 2) {
                   let p = d[f];
                   let h = d[f + 1];
                   c.push(p + "," + h);
                 }
                 u.push(c.join(";"))
               }
             }
             break;
           default:
             break;
         }
         if (u.length <= 1) {
           u = u.toString();
         }
         let result = {
           type: n,
           bound: i,
           points: u
         };
         return result;
       },
   

百度地图api -- 小程序

1. 引入

   我这边使用uni-app，对于百度地图，官网的小程序有给github上的demo和需要的下载的sdk，使用的时候直接import引入vue页面就可以了。

      import bmap from '../../libs/bmap-wx.min.js' 
   

   html的部分，微信小程序自己有map组件可以使用，里面具体的属性可以去官网探索。

   <view class="text-area">
           <map class="map" id="map" :longitude="longitude" :latitude="latitude" :scale="scale" :show-location="true"
                   :markers="markers" @markertap="makertap" :polygons="polygon"></map>
   </view>
   

   我们在onload的时候去实例化一个地图， 这里需要注意的是，我们在小程序里使用的是微信自己的map组件，他需要经纬度是标准的经纬度，而我们通过百度api查询出来的经纬度是百度的经过加密偏移之后的经纬度，所以需要转换一下。小程序端好像也没有提供相关的方法（对应web端的Pixel方法），所以就查到了一个基本准确的方法作为参考。

   onLoad() {
       let that = this;
       let BMap = new bmap.BMapWX({
               ak: '你的ak'
       });
       this.BMap = BMap;
       this.searchPlace();
   },
   
   //methods
   searchPlace() {
           let BMap = this.BMap;
           let that = this;
           let fail = function(data) {
                   console.log(data)
           };
           let success = function(data) {
                   let wxMarkerData = data.wxMarkerData;
                   wxMarkerData.forEach((item, index) => {
                           item.id = index + 1;
                           return item;
                   })
                   if (wxMarkerData) {
                           that.wxMarkerData = wxMarkerData;
                           that.markers = wxMarkerData;//需要画出来的标记点
                           that.latitude = wxMarkerData[0].latitude;
                           that.longitude = wxMarkerData[0].longitude;
                   }
                   //这里写一个查询uid的方法
           }
           //geocoding是百度地图通过地址去转经纬度的方法
           BMap.geocoding({
                   address: this.address,//搜索的地址
                   fail: fail,
                   success: success,
           }); 
   }，
   queryUid: function() {
       let uid = this.uid;
       let BMap = this.BMap;
       let that = this;
       if (uid) {
           wx.request({
                   url: "http://map.baidu.com/?pcevaname=pc4.1&qt=ext&ext_ver=new&l=12&uid=" + uid,
                   dataType: 'json',
                   responseType: 'text',
                   method: 'GET',
                   header: {
                       'content-type': 'application/x-www-form-urlencoded'
                   },
                   success: function({
                       data
                   }) {
                       let content = data.content;
                       if (null != content.geo && content.geo != undefined) {
                           let geo = content.geo;
                           let geoObj = that.parseGeo(geo);//和上面的方法是一样的
                           let points = that.coordinateToPoints(BMap, geoObj.points);//和上面的方法略微不同
                           let polygonObj = {//微信map组件要求的polygon格式
                               points: points,
                               strokeWidth: 3,
                               strokeColor: '#e30000',
                               fillColor: '#ff00005e',
                           }
                           that.polygon.push(polygonObj); //把边界信息更新给polygon
                       }
                   },
           });
       }
   }
   

   下面是转换方式区别的关键代码：

   coordinateToPoints(map, coordinate) {
           var points = [];
           if (coordinate) {
               let arr = coordinate.split(";");
               if (arr) {
                   for (let i = 0; i < arr.length; i++) {
                       let coord = arr[i].split(",");
                       if (coord && coord.length == 2) {
                           let mctXY = convertMC2LL({x:coord[0], y:coord[1]}); //在下面
                           points.push({
                               latitude: mctXY[1] + '',
                               longitude: mctXY[0] + ''
                           });
                       }
                   }
               }
           }
           return points;
       },
   

       var MCBAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0]
       var MC2LL = [
           [1.410526172116255e-8, 0.00000898305509648872, -1.9939833816331, 200.9824383106796, -187.2403703815547, 91.6087516669843, -23.38765649603339, 2.57121317296198, -0.03801003308653, 17337981.2],
           [-7.435856389565537e-9, 0.000008983055097726239, -0.78625201886289, 96.32687599759846, -1.85204757529826, -59.36935905485877, 47.40033549296737, -16.50741931063887, 2.28786674699375, 10260144.86],
           [-3.030883460898826e-8, 0.00000898305509983578, 0.30071316287616, 59.74293618442277, 7.357984074871, -25.38371002664745, 13.45380521110908, -3.29883767235584, 0.32710905363475, 6856817.37],
           [-1.981981304930552e-8, 0.000008983055099779535, 0.03278182852591, 40.31678527705744, 0.65659298677277, -4.44255534477492, 0.85341911805263, 0.12923347998204, -0.04625736007561, 4482777.06],
           [3.09191371068437e-9, 0.000008983055096812155, 0.00006995724062, 23.10934304144901, -0.00023663490511, -0.6321817810242, -0.00663494467273, 0.03430082397953, -0.00466043876332, 2555164.4],
           [2.890871144776878e-9, 0.000008983055095805407, -3.068298e-8, 7.47137025468032, -0.00000353937994, -0.02145144861037, -0.00001234426596, 0.00010322952773, -0.00000323890364, 826088.5]
       ]
   
       function convertor(cC, cD) {
           if (!cC || !cD) {
               return null;
           }
           let T = cD[0] + cD[1] * Math.abs(cC.x);
           const cB = Math.abs(cC.y) / cD[9];
           let cE = cD[2] + cD[3] * cB + cD[4] * cB * cB +
               cD[5] * cB * cB * cB + cD[6] * cB * cB * cB * cB +
               cD[7] * cB * cB * cB * cB * cB +
               cD[8] * cB * cB * cB * cB * cB * cB;
           T *= (cC.x < 0 ? -1 : 1);
           cE *= (cC.y < 0 ? -1 : 1);
               T = T - 0.00645;
               cE = cE - 0.0061852;
           return [T, cE];
       }
   
       export default function convertMC2LL(cB) {
           const cC = {
               x: Math.abs(cB.x),
               y: Math.abs(cB.y)
           };
           let cE;
           for (let cD = 0, len = MCBAND.length; cD < len; cD++) {
               if (cC.y >= MCBAND[cD]) {
                   cE = MC2LL[cD];
                   break;
               }
           }
           const T = convertor(cB, cE); 
           return T;
       } 
   

自此百度地图的使用就结束了，腾讯地图的使用写在下一篇吧。还有很多没有搞懂的地方需要继续探索，刚开始使用vue，如果写的不好的地方欢迎指出！🤩