封装高德地图js到微信小程序api

2019-11-26

一转眼又是一个月过去了, 天气越来越冷了, 前几天外公去世, 然后披星斩月得赶回家去, 熬了两晚上又赶回来上班, 舟车劳顿, 回来就感冒一直溜鼻涕.生命是真的脆弱, 家人一天天的老去, 而我行尸般的活再这个城市, 漫无目的的流浪.

公司一直运营这APP端和小程序端, 最近领到突发奇想想搞个网页端, 这样嵌套到别人的APP里面. OK, 从微信小程序迁移到Vue嘛, 差异还算不太大, 就是小程序那边的地图全是原生腾讯地图, 而vue这把我打算使用高德的jssdk来搞, 小程序那边已经把数据全算好了, 而且考虑到后期维护两边代码, 所以统一两边的api还是非常有必要的嘛.

在小程序里面map是一个小程序的原生组件, 而在vue里面我们也可以去搞一个自定义组件嘛, 然后全局注册下就行, 我们先在vue项目的components目录下创建一个map.vue, 在创建一个实时视图先引入这个组件, 实时的预览, 好像vue的组件热更新有点反应迟钝, 所以偶尔需要我们手动点击f5在刷新页面.

先来编辑下html模板部分, 创建一个id为map的div, 小程序map里面可以包含一些啥core-view, core-view这些组件, 我们这就直接来个slot插槽来让我们地图组件丰富起来吧.

<template>
  <div id="map">
    <slot/>
  </div>
</template>

代码都是虚得, 先来把地图弄出来才是真的, 先在script标签中的vue => mounted() 中来选中map来给他填充上地图, 至于为啥是mounted而不是created ? 我们填充地图需要vue把页面渲染好之后才能进行渲染把, 然后created钩子下面页面还没开始渲染呢.

mounted(){
  // 这里我是在index下面链接直接引入的高德组件, 当然应该也可以选中import
  this.$AMap = window.AMap
  // 缩放的级别 这里是通过组件传下来的值
  const { zoom = 13 } = this
  const map = this.map = new AMap.Map('map', {
    // resizeEnable: false, //是否监控地图容器尺寸变化
    zoom, //初始化地图层级
    showBuildingBlock: true,
    // center //初始化地图中心点
  })
}

就这样我们在给map组件设置一个高度宽度, 地图就能渲染出来了, 不过我们是还需要实现更多的功能, 就这样才刚刚开始呢, 不过渲染出地图就代表我们走到了最关键的一步呢.

先一个一个的来, 首先我们会从父级传来一个坐标, 然后地图移动到指定的坐标嘛. 嗯,,, 先来props里面定义咯

props: {
  center: String,   // 中心坐标, 就按照标准的,来区分咯
  zoom: Number   // 缩放级别, 上面初始化地图有用到
}
  ...

mounted(){
  ...
  if(this.center) this.handlePanTo(this.center)
},
methods: {
  handlePanTo(z){
    // 直接调用高德方法移动过去咯
    return this.map.panTo(z.split(','));
  }
}

小程序那边那些 markers 真的非常赞呢, 嗯先来搞这个把

props: {
  ...
  markers: Array
},
mounted(){
  ...
  if(this.markers) this.markers.map((item)=>{
    // console.log(iconPath[icon])
    return this.handleAddMark(item)
  })
},
methods: {
  ...
  /**
    * @description: 标记点添加
    * @param {option,callout:lable} 
    * @return: 
    */
  handleAddMark({iconPath,height,width,latitude,longitude, callout = false}){
    // 图标要转换下, 高德图标需要转成一个对象
    const marker = new AMap.Marker({
        icon:new AMap.Icon({
          size: new AMap.Size(width, height),
          image: iconPath,
          imageSize: new AMap.Size(width, height),
        }),
        position:[longitude,latitude],
        offset: new AMap.Pixel(-width/2, -height)
      });
    // marker.setMap(this.map);
    if(callout && callout.content){
      // 处理callout咯, 这个标签还是非常赞的
      marker.setLabel({
        offset: new AMap.Pixel(0, -35),  //设置文本标注偏移量
        content: `<div style="color:${callout.color};font-size:${callout.fontSize}px;padding: ${callout.padding}px; background-color:${callout.bgColor};border-radius:${callout.borderRadius}px;">${callout.content}</div>`, //设置文本标注内容
        direction: 'center' //设置文本标注方位
      })
    }
    this.map.add(marker);
  }
}

既然是地图, 那怎能没有定位了, 来封装下Promise定位的功能,对了那个啥初始化位置建议先直接在链接里面把组件导入全咯, 异步加载那些组件坑稍稍有点多, 直接在链接后面加上 &plugin=AMap.Geolocation,AMap.Geocoder 会方便很多呢

methods: {
  ...
  /**
    * @description: 获取定位位置, 首先要初始化位置
    * @param {type} 
    * @return: 
    */
  $getLocation(){
    return new Promise((resolve,reject)=>{
      // if(!AMap.Geocoder) reject({message:"未初始化定位服务"})
      this.geolocation.getCurrentPosition((status, result)=>{
        if(status=='complete'){
          // 这里我每次定位都会给存起来, 方便用嘛, 哈哈
          // store.dispatch('setLocation',result)
          resolve(result.position)
        }else{
          reject(result)
        }
      })
    })
  }
}

用户操作地图的监听呢. 老样子先在props里面定义一个方法,然后在mounted初始化地图里面监听拖拽事件, 然后丢给我们自己定义的方法去处理

props: {
  ...
  bindregionchange: Function
},
mounted() {
  ...
  // 监听地图拖拽
  map.on('dragstart', this.handleDrag);  // 拖拽开始
  // map.on('dragging', handleDragging); // ing
  map.on('dragend', this.handleDrag);  // eng
},
methods: {
  ...
  handleDrag({type}){
    const zoom = this.map.getZoom() //获取当前地图级别
    const center = this.map.getCenter() //获取当前地图级别
    // 丢给父组件处理
    if(this.bindregionchange) this.bindregionchange({type,center,zoom})
  }
}

还有还多啥线路规划, 地理位置解析, 地址搜索, 这些功能我就不一一解析了, 我直接把我自己的代码贴出来把

<!--
 * @Description: 
 * @Author: QiaTia
 * @Date: 2019-06-20 10:34:20
 * @LastEditors: QiaTia
 * @GitHub: https://github.com/QiaTia/
 * @LastEditTime: 2019-08-24 14:02:07
 -->
<template>
  <div id="map">
    <slot></slot>
    <img class="map_log" src="@/assets/icon/map_log.png" alt="map_log">
  </div>
</template>

<script>
// import initMap from '@/libs/map'
import store from '@/store'

var geocoder

export default {
  name: 'MapComp',
  methods: {
    /**
     * @description: 标记点添加
     * @param {option,callout:lable} 
     * @return: 
     */
    handleAddMark({iconPath,height,width,latitude,longitude, callout = false}){
      const marker = new AMap.Marker({
          icon:new AMap.Icon({
            size: new AMap.Size(width, height),
            image: iconPath,
            imageSize: new AMap.Size(width, height),
          }),
          position:[longitude,latitude],
          offset: new AMap.Pixel(-width/2, -height)
        });
      // marker.setMap(this.map);
      if(callout && callout.content){
        marker.setLabel({
          offset: new AMap.Pixel(0, -35),  //设置文本标注偏移量
          content: `<div style="color:${callout.color};font-size:${callout.fontSize}px;padding: ${callout.padding}px; background-color:${callout.bgColor};border-radius:${callout.borderRadius}px;">${callout.content}</div>`, //设置文本标注内容
          direction: 'center' //设置文本标注方位
        })
      }
      this.map.add(marker);
    },
    handlePanTo(z){
      return this.map.panTo(z.split(','));
    },
    // 拖拽事件监听
    handleDrag({type}){
      const zoom = this.map.getZoom(); //获取当前地图级别
      const center = this.map.getCenter(); //获取当前地图级别
      if(this.bindregionchange) this.bindregionchange({type,center,zoom})
      // if(type === 'dragend'){
      //   // 拖拽结束
      //   console.log({center,zoom})
      // }else{
      //   // 开始
      //   // console.log(center.toString())
      // }
    },
    init(){
      // console.log(this.markers)
      let iconPath ={
        "startIcon": new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(25, 35),
          // 图标的取图地址
          image: '//res.kaishisong.com/2019-07-01/1460481561960570520.png',
          // 图标所用图片大小
          imageSize: new AMap.Size(25, 35),
          // 图标取图偏移量
          // imageOffset: new AMap.Pixel(-9, -3)
        }),
        "endIcon": new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(25, 34),
          // 图标的取图地址
          image: '//res.kaishisong.com/2019-07-01/4237541561960625907.png',
          // 图标所用图片大小
          imageSize: new AMap.Size(135, 40),
          // 图标取图偏移量
          imageOffset: new AMap.Pixel(-9, -3)
        })
      }
      if(this.markers) this.markers.map((item)=>{
        // console.log(iconPath[icon])
        return this.handleAddMark(item)
      })
      this.map.setFitView();
      // 初始中心位置
      if(this.center) this.handlePanTo(this.center)
    },
    /**
     * @description: 初始化定位
     * @param {type} 
     * @return: 
     */
    initLocation(){
      // this.map.plugin('AMap.Geolocation', ()=> {
        this.geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          // 设置定位超时时间，默认：无穷大
          timeout: 1e4,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          // buttonOffset: new AMap.Pixel(16, 80),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true, 
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: 'RB'
        })
        // 添加控件到地图
        // this.map.addControl(this.geolocation)
        // 地址解析
        this.geocoder =(lnglat, city = '')=>{
          return new Promise((resolve, reject)=>{
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            if(!/\d,\d/.test(lnglat)) reject({msg:"lnglat invalid!"})
            const geocoder = new AMap.Geocoder({city})
            lnglat = lnglat.split(',')
            geocoder.getAddress(lnglat, function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                // result为对应的地理位置详细信息
                resolve(result.regeocode)
              }else reject(result)
            })
          })
        }
      // })
    },
    /**
     * @description: 获取定位位置, 首先要初始化位置
     * @param {type} 
     * @return: 
     */
    $getLocation(){
      return new Promise((resolve,reject)=>{
        // if(!AMap.Geocoder) reject({message:"未初始化定位服务"})
        this.geolocation.getCurrentPosition((status, result)=>{
          if(status=='complete'){
            store.dispatch('setLocation',result)
            resolve(result.position)
          }else{
            reject(result)
          }
        })
      })
    },
    /**
     * @description: 地理位置编码
     * @param {type} 
     * @return: 
     */
    $geocoder(e){
      if(!AMap.Geocoder) return Promise.reject({msg: "未初始化位置服务"})
      return this.geocoder(e)
    },
    /**
     * @description: 线路规划
     * @param {
     *   start || end: {lon:longitude,lat:latitude},
     *   mode: "Riding"
     * } 
     * @return: 
     */
    $preLine(start, end, mode = "Riding",config = { hideMarkers: true, autoFitView: true}){
      return new Promise((resolve, reject)=>{
        AMap.plugin('AMap.'+mode,()=>{ //异步加载插件
          //构造路线导航类
          const Pine = new AMap[mode]({
            map: this.map,
            ...config
          }); 
          // 根据起终点经纬度规划驾车导航路线
          Pine.search(new AMap.LngLat(start.lon,start.lat), new AMap.LngLat(end.lon,end.lat), function(status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === 'complete') {
              resolve(result)
            } else {
              reject(result)
            }
          })
        })
      })
    },
    /**
     * @description: 区域搜索
     * @param {type} 
     * @return: 
     */
    $placeSearch(keywords, city, pageIndex = 1){
      return new Promise((resolve, reject)=>{
        AMap.plugin('AMap.PlaceSearch', function(){
          const placeSearch = new AMap.PlaceSearch({city, pageIndex, pageSize:12});
          placeSearch.search(keywords, (status, result)=>{
            // 搜索成功时，result即是对应的匹配数据
            if(status=='complete'&&result.info == "OK"){
              resolve(result.poiList)
            }else{
              reject(result)
            }
          })
        })
      })
    },
    /**
     * @description: 周边搜索
     * @param {type} 
     * @return: 
     */
    $searchNear(center, pageIndex = 1){
      return new Promise((resolve, reject)=>{
        AMap.plugin('AMap.PlaceSearch', function(){
          const placeSearch = new AMap.PlaceSearch({pageIndex, pageSize: 12})
          placeSearch.searchNearBy('', center.split(','), 500, (status, {poiList,info})=>{
            // 搜索成功时，result即是对应的匹配数据
            if(status=='complete'&&info == "OK"){
              resolve(poiList)
            }else{
              reject(status, info)
            }
          })
        })
      })
    },
    $geoCode(val, city=''){
      if(!geocoder){
        geocoder = new AMap.Geocoder({city});
      }
      return new Promise((resolve, reject)=>{
        geocoder.getLocation(val, function(status, result) {
          if (status === 'complete'&&result.geocodes.length) {
            resolve(result.geocodes)
          }else reject({status, result})       
        })
      })
    }
  },
  mounted(){
    this.$AMap = window.AMap
    const {zoom = 13} = this
    const map = this.map = new AMap.Map('map', {
      // resizeEnable: false, //是否监控地图容器尺寸变化
      zoom, //初始化地图层级
      showBuildingBlock: true,
      mapStyle:'amap://styles/dec60b843d1f1e558df46373fbce0eaa',
      // center //初始化地图中心点
    })
    // 监听地图拖拽
    map.on('dragstart', this.handleDrag);  // 拖拽开始
    // map.on('dragging', handleDragging); // ing
    map.on('dragend', this.handleDrag);  // eng
    this.init()
    if(this.isGetLocation) this.initLocation()
  },
  watch: {
    center: function(val){
      this.handlePanTo(val)
    },
    markers: function(val){
      this.map.remove(this.map.getAllOverlays('marker'))
      val.map(this.handleAddMark)
    }
  },
  props:{
    center: String,
    zoom: Number,
    markers: Array,
    isGetLocation: Boolean,
    bindregionchange: Function,
  }
}
</script>

<style lang="scss">
#map{
  .amap-marker-label{
    border: 0;
    background-color: transparent;
    transform: translate(-35%,-15%);
    padding: 0;
    position: relative;
    div{
      box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
      max-width: 4rem;
      line-height: 1.2;
      // white-space: normal;
      overflow: hidden;
      &::after{
        content: '';
        position: absolute;
        left: 50%;
        width: 0px;
        height: 0;
        transform: translateX(-50%);
        bottom: -16px;
        border-width: 8px;
        border-style: solid;
        border-color: white transparent transparent transparent;
        // box-shadow: 0 3px 6px 0 rgba(114, 124, 245, .5);
      }
    }
  }
  .map_log{
    position: absolute;
    top: .1rem;
    z-index: 9;
    left: .2rem;
    height: .36rem
  }
}
</style>