今天老大下发一个查看每一订单骑手轨迹的需求，由于之前公司app使用的高德地图，所以就省的申请 key 了。
如果定制化开发需求不太高的话，可以用vue-amap，具体看官网
引入原生高德地图的博客比较多，有参考，所以选择了原生，搭建流程如下：
1. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=YOURKEY"></script>
<title>test</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2. webpack.base.conf.js
注意：配置完之后记得重新 npm run dev
在module.exports = {}里面的底部加入以下代码：
module.exports = {
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
externals: { // 新增的配置代码
'AMap': 'AMap'
},
}
3. 引入高德地图的页面
注意：要在 mounted 中调用生成地图的方法，在 created 中调用不行。
<template>
<div class="test">
财务统计
<div id="container" style="width:800px; height:600px"></div>
</div>
</template>
<script>
import AMap from 'AMap'
export default {
name: 'test',
methods: {
loadmap(){
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())
})
}
},
mounted() { // created 方法不行
this.loadmap();
},
}
</script>
5. 效果图
效果图
