这篇文章写一下高德地图的简单应用,本人也是刚入坑,在研究阶段
注册高德开发者账号,申请KEY完成注册
注册完再打开控制台->应用管理->找到“+添加新KEY”->点击会跳出这个弹框:
vue安装vue-amap
npm install vue-amap --save
index.html 引入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你的key"></script>
也可以min.js引入,我是用的index.html里引入
import VueAMap from 'vue-amap'
// Vue.use(VueAMap)
// VueAMap.initAMapApiLoader({
// key: '', //高德的key(自己申请)
// plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch',
// 'AMap.Scale', 'AMap.OverView',
// 'AMap.ToolBar', 'AMap.MapType',
// 'AMap.PolyEditor', 'AMap.CircleEditor',
// 'AMap.Geolocation'],//引用的插件(根据需要引入)
// uiVersion: '1.0',//UI库 版本
v: '1.4.4', //高德SDK 版本
// })
配置vue.config.js
module.exports = {
devServer: {
port: 8080 // 端口号配置
},
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
}
}
}
配置完得重启一下
创建组件
<template>
<div class="box">
<div id="container" style="width:750px; height:300px"></div>
</div>
</template>
<script>
import AMap from 'AMap' // 引入高德地图
export default {
mounted () {
this.init()
},
methods: {
init () {
var map = new AMap.Map('container', {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13,
viewMode:'3D'//使用3D视图
});
//实时路况图层
var marker = new AMap.Marker({
position:[116.39, 39.9]//位置
})
map.add(marker);//添加到地图
}
}
}
</script>
路由按需加载会报错,搞了我老长时间,完事就可以使用了,别的功能实现去看官网