vue中使用高德地图的方式
(一). 第一种script引入
第一步. script引入的方式,引入到index.html中,
|
1 |
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=刚刚申请的密钥"></script> |
第二步. vue项目中build文件夹下的webpack.base.config.js中需要配置,比如写在最下面”node{}”的下一行
|
1 2 3 4 5 |
externals: { 'AMap': 'AMap', 'Loca': 'Loca', 'AMapUI': 'AMapUI' } |
第三步. 然后在项目中可以直接用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div id='map'></div> </template> <script> import AMap from AMap; export default { data () { return { map: null } }, mounted () { this.map = new AMap.Map('map', { content: [] //中心点 zooms: [5-11] // 地图缩放级别(做了限制),若不做限制则是 zoom: num }) } } </script> <style> #container{width:100%;height:500px;} </style> |
(二).第二种 vue-amap 一套专门用于vue的高德地图插件
需要npm仓库安装
npm install vue-amap -S
然后在main.js入口文件中引入高德地图,分发出去,让每个组件都可以使用,
|
1 2 3 4 5 6 7 8 9 10 |
import AMap from 'vue-amap' Vue.use(AMap) // 初始化地图 AMap.initAMapApiLoader({ // 高德的key key: 'YOUR_KEY', // 插件集合 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar','AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'] }) |
然后在组件中直接调用插件中封装好的组件就可以了,例如
<el-amap vid=”amapDemo” :zoom=”zoom” :center=”center”></el-amap>
详情参见官方文档 https://elemefe.github.io/vue-amap/
此时地图就加载完成了,后面将写入高德地图中一些常用功能