本来想用vue-amap的,但是一直报错,确实还不够成熟
在index.html文件中引入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key='你的key'"></script>
在webpack.base.conf.js中配置
context: path.resolve(__dirname, '../'),
//加上这段配置
externals: {
AMap: "AMap",
},
entry: {
app: './src/main.js'
},
webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是,所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。
在使用地图的组件中引入
import AMap from 'AMap'
最后就是创建一个地图容器渲染地图
<template>
<div class="hello">
<div id="content"> </div>
</div>
</template>
<script>
import AMap from 'AMap'
export default {
name: 'HelloWorld',
data () {
return {
center: [116.397428, 39.90923]
}
},
mounted(){
this.GaodeMap()
},
methods:{
GaodeMap(){
var map = new AMap.Map('content', {
center: this.center, // [纬度,经度]
resizeEnable: true,
zoom: 10
});
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.Scale())
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#content{
width: 1000px;
height: 1000px;
}
</style>