vue引入原生高德地图

野性酷女 2022-11-05 11:50 265阅读 0赞

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

如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 [https://elemefe.github.io/vue-amap/\#/zh-cn/introduction/install][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>
        
      </body>
    </html>

### 2. webpack.base.conf.js ###

在module.exports = \{\}里加入 externals对象

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_elemefe.github.io_vue-amap_zh-cn_introduction_install]: https://link.jianshu.com?t=https%3A%2F%2Felemefe.github.io%2Fvue-amap%2F%23%2Fzh-cn%2Fintroduction%2Finstall