(1)如果引入组件:vue-amap,需要安装依赖。
安装指令 npm install vue-amap
然后在main里面配置:
import VueAMap from 'vue-amap' // 高德地图
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
key: '83ed397b509e23519432601e51123ffe',
plugin: [
'AMap.Autocomplete', // 输入提示插件
'AMap.PlaceSearch', // POI搜索插件
'AMap.Scale', // 右下角缩略图插件 比例尺
'AMap.OverView', // 地图鹰眼插件
'AMap.ToolBar', // 地图工具条
'AMap.MapType', // 类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
'AMap.PolyEditor', // 编辑 折线多,边形
'AMap.CircleEditor', // 圆形编辑器插件
'AMap.Geolocation' // 定位控件,用来获取和展示用户主机所在的经纬度位置
],
v: '1.4.4'
})
此时全局配置已经配置好,vue页面或者组件就可以使用了
不用创建:
marker = new AMap.Marker({ })
可以直接用了
(2)原生高德地图引用:
在index.html中引入
<script src="https://webapi.amap.com/maps?v=1.4.15&key=83ed397b509e23519432601e51123ffe"></script>
此时全局配置已经配置好,vue页面或者组件就可以使用了
创建地图:
map=''
map = new AMap.Map('amap2', {
resizeEnable: true,
center: [116.403322, 39.900255], // 地图中心点
zoom: 13 // 地图显示的缩放级别
})