vue + vue-baidu-map + cordova实现获取地理位置、跳转第三方地图软件

<template>
<div class="map-page">
    <head-com title></head-com>
    <form class="search-con" action="/">
      <van-search v-model="addressKeyword" placeholder="请输入搜索关键词" @search="onSearch" />
    </form>
    <baidu-map
      class="map"
      @ready="handler"
      :center="center"
      :zoom="zoom">
      <!--定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <!-- <template v-if="findNow">
        <bm-view class="map"></bm-view>
        <bm-local-search :keyword="addressKeyword" :auto-viewport="true" :location="center"></bm-local-search>
      </template> -->
    </baidu-map>
    <div class="info-con">
        <div class="txt">
            <h2 class="van-ellipsis">{{toAddName}}</h2>
            <p>孤岛镇</p>
        </div>
        <van-icon :name="require('@/assets/images/map_icon.png')" @click="optionShow" />
    </div>
    <van-action-sheet
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @select="choseMap"
        @cancel="show=false"
    />
  </div>
</template>

<script>
import headCom from '_c/header/index.vue'
export default {
  name: 'Bmaptrace',
  components: {
    headCom
  },
  data () {
    return {
      show: false,
      actions: [{ code: 1, name: '百度地图' }, { code: 2, name: '高德地图' }, { code: 3, name: '腾讯地图' }],
      center: { lng: 118.811545, lat: 37.871721 },
      zoom: 16,
      addressKeyword: '',
      toAddName: '',
      toLat: '',
      toLng: '',
      fromAddName: '我的位置',
      fromLat: '',
      fromLng: '',
      centerList: []
    }
  },
  created() {
    this.getGps()
    this.getCompany()
  },
  methods: {
    async getCompany() {
      try {
        let res = await this.$api.home.getCompanyLocationList()
        let arr = [{ id: 0, name: '孤岛镇政府', lng: 118.811545, lat: 37.871721 }]
        res.data.forEach((item) => {
          arr.push(item)
        })
        this.centerList = arr
        this.toAddName = this.centerList[0].name
        this.toLat = this.centerList[0].lat
        this.toLng = this.centerList[0].lng
      } catch (error) {
        this.$toast(error.msg)
      }
    },
    // 获取当前地理位置
    getGps() {
      var that = this
      let exec = cordova.require('cordova/exec')
      exec(
        async function(result) {
          let jsonResult = JSON.parse(result)
          that.fromLat = jsonResult.latitude
          that.fromLng = jsonResult.longitude
        },
        function(error) {
          that.$toast(error)
        },
        'GetGpsPlugin',
        'open',
        ['']
      )
    },
    // 弹出地图选项
    optionShow() {
        this.show = true
    },
    // 地图选项
    choseMap(action, index) {
      var that = this
      let exec = cordova.require('cordova/exec')
      exec(
          async function(result) {
              let jsonResult = JSON.parse(result)
              if (jsonResult.code === '200') {
                  if (jsonResult.mapFlag === '1') {
                      that.$toast('未安装百度地图！')
                  } else if (jsonResult.mapFlag === '2') {
                      that.$toast('未安装高德地图！')
                  } else if (jsonResult.mapFlag === '3') {
                      that.$toast('未安装腾讯地图！')
                  }
              }
          },
          function(error) {
            that.$toast(error)
          },
          'OpenMapPlugin',
          'open',
          [action.code, that.fromLat, that.fromLng, that.fromAddName, that.toLat, that.toLng, that.toAddName]
      )
    },
    // 搜索
    onSearch(val) {
      let _this = this
      let arr = []
      this.centerList.forEach((item) => {
        if (val.length !== 0) {
          if (item.name === val) {
          arr.push(1)
            _this.center.lng = item.lng
            _this.center.lat = item.lat
            _this.toAddName = item.name
            _this.toLat = item.lat
            _this.toLng = item.lng
          } else {
            arr.push(2)
          }
        } else {
          arr.push(1)
          this.center = { lng: 118.811545, lat: 37.871721 }
          this.toAddName = this.centerList[0].name
          this.toLat = this.centerList[0].lat
          this.toLng = this.centerList[0].lng
        }
      })
      if (arr.indexOf(1) === -1) {
        _this.$toast('请输入有效值')
      }
    },
    // 地图初始化
    handler ({ BMap, map }) {
        this.centerList.forEach((item) => {
            this.getPoints({ BMap, map }, item)
        })
        map.enableScrollWheelZoom(true)
    },
    getPoints({ BMap, map }, position) {
      var that = this
      var point = new BMap.Point(position.lng, position.lat)
      var marker = new BMap.Marker(point)
      map.addOverlay(marker)
      var opts = {
        width: 130,
        height: 60,
        enableMessage: true
      }
      var infoWindow = new BMap.InfoWindow(position.name, opts)
      marker.addEventListener('click', function() {
          that.toAddName = position.name
          that.toLat = position.lat
          that.toLng = position.lng
          map.openInfoWindow(infoWindow, point)
      })
    },
    // 关闭信息窗口 @close 自带的方法
    infoWindowClose (marker) {
      this.centerList[marker].showFlag = false
    },
    // 打开信息框
    infoWindowOpen (marker) {
      this.centerList[marker].showFlag = true
    }
  }
}
</script>
<style lang="scss">
.map-page {
  .search-con {
    position: fixed;
    top: 0;
    left: 50px;
    z-index: 999;
    right: 0;
    .van-search {
      background-color: transparent;
      height: 44px;
      padding-left: 0;
    }
  }
  .BMap_bubble_content{
      font-size: 16px;
  }
  .info-con{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 66px;
      position: fixed;
      bottom: 0;
      left: 4%;
      right: 4%;
      .txt{
          width: 70%;
          h2{
              font-size: 20px;
              margin: 0;
              padding-bottom: 5px;
          }
          p{
              margin: 0;
              font-size: 13px;
          }
      }
      .van-icon{
          width: 45px;
          height: 45px;
          border-radius: 50%;
          background: #0a7bef;
          color: #fff;
          text-align: center;
          line-height: 45px;
          font-size: 26px;
      }
  }
}
.map {
  position: fixed;
  top: 44px;
  left: 0;
  width: 100%;
  height: calc(100vh - 110px);
}
</style>