由于工作上的需要，今天捣鼓了半天高德地图。
如果定制化开发需求不太高的话，可以用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>
