vue引入原生高德地图

2023年10月17日 193次阅读 来源: 一叶信笺飘云间

由于工作上的需要，今天捣鼓了半天高德地图。

如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

然而我们公司需要英文版的高德，我看vue-amap中好像没有这方面的配置，而且还有一些其他的定制化开发需求，然后就只用原生的高德。

其实原生的引入也不复杂，但是有几个坑要填一下。

1. index.html

注意，引入的高德js一定要放在头部而不是尾部，否则就会报 “AMap is not defined”。这个坑我踩了好久！网上找了其他文章也都都没有提到这一点。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=YOURKEY"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2. webpack.base.conf.js

在module.exports = {}里加入

externals: {
  'AMap': 'AMap'
},

3. 引用高德的那个页面

<template>
  <div class="hello">
    <div style="height:500px" id="container" tabindex="0"></div>
  </div>
</template>

<script>
import AMap from 'AMap'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'hello'
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init: function () {
      let map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        resizeEnable: true,
        zoom: 10,
        lang: 'en'
      })
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
        map.addControl(new AMap.ToolBar())
        map.addControl(new AMap.Scale())
      })
    }
  }
}
</script>
    原文作者：一叶信笺飘云间
    原文地址: https://www.jianshu.com/p/6f9ce597167b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞