Vue项目引入高德地图

原创 yaohui 随笔 VUE 288阅读 2018-05-04 13:42:42 举报

Vue项目引入高德地图
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ef363c1f815bc28389a7657a1c7784f8"></script>;
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
Key的值需要申请
在build文件夹中的webpack.base.conf.js中找到module.exports对象 在里面添加
externals: {
'AMap': 'window.AMap'
}
最后在自己的路径下写一个vue组件
<template>
<div id="container" :style="{'width': width,'height': h在vue 的index.html引入高德API
eight}"></div>
</template>

<script>
import AMap from 'AMap'
export default {
data() {
return {
width: '100%',
height: '956px'
}
},
mounted() {
this.loadmap()
},
methods: {
loadmap() {
const map = new AMap.Map('container', {
zoom: 9
})
}
}
}
</script>

<style scoped>
</style>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复