一、高德地图介绍
高德地图是中国领先的数字地图内容、导航和位置服务解决方案提供商,其提供了各种地图服务,如:定位,搜索,导航,交通等。高德地图的主要目标是为用户提供实用、智能、人性化的信息服务,成为人们移动出行生活的最佳伙伴。
二、Vue.js简介
Vue.js是一个流行的渐进式Javascript框架,其核心库在2021年4月发布了最新的版本。Vue.js使用单文件组件风格,将模板、脚本和样式都写在一个文件中,使代码更清晰和维护起来更容易。Vue.js还提供了许多实用的指令和插件,如v-bind、v-model等,使Vue.js非常适合构建复杂的单页应用程序(SPA)。
三、Vue高德地图使用
1、安装
首先需要安装高德地图的Javascript API以及Vue.js官方提供的VueAMap插件:
npm install vue-amap amap-jsapi-loader --save
2、注册插件
在main.js文件中引入VueAMap插件,并注册到Vue实例中:
// main.js
import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
// 高德的key
key: 'your amap key',
// 插件集合
plugin: [
'AMap.Geolocation',
'AMap.Marker',
'AMap.Walking',
'AMap.MapType',
'AMap.PolyEditor'
],
// 高德 sdk 版本,默认为 1.4.15
v: '1.4.15',
uiVersion: '1.0.11' // UI库版本号
})
3、创建地图组件
在Vue组件中添加高德地图,使用VueAMap提供的`amp-map`标签,并设置各种属性来自定义地图实例:
<template>
<div>
<amap-map :zoom="13">
</amap-map>
</div>
</template>
<script>
export default {
name: 'MapDemo'
}
</script>
4、标记和信息窗体
创建一个标记对象,并为其添加事件处理程序来显示信息窗口:
<template>
<div>
<amap-map :zoom="13">
<amap-marker :position="markerPosition" @click="showInfoWindow"/>
<amap-info-window :position="infoWindowPosition">
<div>{{infoWindowText}}</div>
</amap-info-window>
</amap-map>
</div>
</template>
<script>
export default {
name: 'MapDemo',
data () {
return {
markerPosition: [121.484170, 31.233385],
infoWindowPosition: [121.484170, 31.233385],
infoWindowText: '信息窗体内容'
}
},
methods: {
showInfoWindow () {
this.$refs.infoWindow.open(this.markerPosition)
}
}
}
</script>
5、搜索
使用高德地图的JavaScript API和VueAMap插件进行地址搜索:
<template>
<div>
<amap-map :zoom="zoom">
<amap-marker :position="markerPosition"/>
</amap-map>
</div>
</template>
<script>
export default {
name: 'MapDemo',
data () {
return {
address: '上海市黄浦区南京东路',
zoom: 13,
markerPosition: []
}
},
mounted () {
this.searchAddress(this.address)
},
methods: {
searchAddress (address) {
this.$amap.getGeocoder().getLocation(address, (status, result) => {
if (status === 'complete' && result.geocodes.length) {
this.markerPosition = result.geocodes[0].location
} else {
alert('地址不存在')
}
})
}
}
}
</script>
6、路线规划
使用高德地图提供的JavaScript API和VueAMap插件进行步行和公共交通路线规划:
<template>
<div>
<amap-map :zoom="zoom">
<amap-marker :position="startPosition"></amap-marker>
<amap-marker :position="endPosition"></amap-marker>
<amap-polyline :path="polylinePath">
<amap-icon :icon="walkIcon" offset="-5,-10"></amap-icon>
</amap-polyline>
</amap-map>
</div>
</template>
<script>
export default {
name: 'MapDemo',
data () {
return {
zoom: 13,
startPosition: [121.484170, 31.233385],
endPosition: [121.537018, 31.245945],
polylinePath: [],
walkIcon: {
size: new this.$amap.Size(23, 25),
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
imageOffset: new this.$amap.Pixel(-2, -13)
}
}
},
mounted () {
this.walkRoutePlan()
},
methods: {
walkRoutePlan () {
const walker = new this.$amap.Walking({
map: this.$refs.map,
panel: '',
// from和to同时存在时,from优先
from: this.startPosition,
to: this.endPosition
})
walker.search((status, result) => {
if (status === 'complete' && result.routes.length) {
const path = result.routes[0].path
this.polylinePath = path.map((p) => [p.lng, p.lat])
this.$refs.map.setFitView()
}
})
}
}
}
</script>