在vue项目中使用地图api,在vue-cli搭建的项目中使用高德地图定位

在开发vue项目中遇到需要定位显示，需求是：需要根据后台返回的数据动态的将订单定位到产生的位置；然后根据现实的位置；

高德地图提供的api 可以调用，用高德地图插件，解决方案非常传统：将高德地图通过cdn的形式引入到项目的index.html文件中，然后即可全局调用AMap。具体文档点击 高德地图开放平台 查看。

现在在vue项目中使用，有几个问题不得不考虑：

• 项目中其实只有几处需要用到地图，并不需要全局引入
• 在index文件中引入js会明显拖慢首屏加载速度，虽然可以使用异步加载script的方式解决，但是始终觉得不够优雅。

具体怎么实现呢？接下开开始表演，请不要眨眼睛~~~~

开始表演：

1：创建一个AMap.js，路径：'src/assets/js/AMap.js' 路径可以根据自己的路径放；

// AMap.js
// 高德map   https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key
export default function MapLoader () {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap)
    } else {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src =
        'http://webapi.amap.com/maps?v=1.4.11&callback=initAMap&key=你的高德地图的key'
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

2. 在任何.vue文件中使用

//demo

//在.vue中使用AMap.js

<template>
  <div class="test">
    <div id="container"></div>
  </div>
</template>
<script>
import MapLoader from '@/assets/js/AMap.js'
export default {
  name: 'test',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    let that = this
    MapLoader().then(AMap => {
      console.log('地图加载成功')
      that.map = new AMap.Map('container', {
        center: [117.000923, 36.675807],
        zoom: 11
      })
    }, e => {
      console.log('地图加载失败' ,e)
    })
  }
}
</script>

3. 项目中使用，动态加载位置和数据

项目部分代码

//地图容器，可以自定义class
//html
<div id="container"></div>

//js
<script>
import MapLoader from '@/utils/AMap.js'
export default {
  data () {
    return {
      map: null
    }
  },
  methods: {
    // 查看位置
    lookMap (row) {
      this.$nextTick(function () {
        this.mapReq(row.reportPlace)
      })
    },
 
    // 获取高德地图api
    mapReq (mapData) {
      let that = this
      MapLoader().then(AMap => {
        console.log('地图加载成功')
        that.map = new AMap.Map('container', {
          resizeEnable: true,
          center: mapData.jwNum,//地图标记title
          zoom: 12 //地图视图缩放级别
        })
        let marker = new AMap.Marker({
          position: that.map.getCenter(),
          icon: new AMap.Icon({
            image: require('@/assets/icon/dw.png'),//定位点显示的图标
            size: new AMap.Size(60, 60), // 图标大小
            imageSize: new AMap.Size(26, 26)
          }),
          offset: new AMap.Pixel(-30, -60) //图标点的位置
        })
        marker.setMap(that.map)
        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        marker.setLabel({
          // 修改label相对于maker的位置
          offset: new AMap.Pixel(30, -80),//点标记定位
          content: `<div style='width:320px;height:160px;background:#fff;border-radius:3px;border:1px solid #e6e6e6;font-size:12px;box-shadow:5px 5px 5px #999;'>
          <h5 style='text-align:center;margin:0;padding:10px;border-bottom:1px solid #e6e6e6;font-size:16px;'>` + mapData.title + `</h5>
            <div style='padding:5px;'>
              <p style='margin:8px 0;'>检测师：` + mapData.name + `</p>
              <p style='margin:8px 0;'>检测时间：` + mapData.dateTime + `</p>
              <p style='margin:8px 0;white-space:pre-wrap;'>地址：` + mapData.address + `</p>
              <p style='margin:8px 0;'>查看报告：<a href="` + mapData.urls + `" target="_bank">` + mapData.reportNum + `</a></p>
            </div>
        </div> `
        })
      }, e => {
        console.log('地图加载失败', e)
      })
    }

  }
}
</script>

效果图：

4. 完美解决

这样，我们得到了一个异步加载的高德地图插件，不需要在全局引入，也不用担心功能不齐全，其他的东西，完全参照高德地图官方文档来设置即可。

Tips:

结语： 这种方法其实可以用来加载任何第三方插件,本文只是以高德地图为例来说明，而且相对来说更加可控，不受制于封装，一些旧版本的经典js插件在es6项目中使用的过渡更加平滑。

仅供参考，楼主菜鸟，欢迎指点。