由于vue-amap不支持路线规划,因此不予采纳。
1.在vue项目中导入高德地图<script type=
"text/javascript"
src=
"http://webapi.amap.com/maps?v=1.3&key=您申请的key值"
></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
2.使用
<template>
<div>
<div class="page" id="map-container"> </div>
<div id="routeInfo"> </div>
</div>
</template>
<script>
import AMap from 'AMap'
import AMapUI from 'AMapUI'
export default{
name: 'Amap',
components: {AMap, AMapUI},
data () {
return {
map: null,
transOptions: {},
routeListData: [],
stationListData: []
}
},
props: {
sartAndEnd: Array // 线路导乘起终点经纬度
},
mounted () {
// 地图初始化
this.map = new AMap.Map('map-container', {
resizeEnable: true,
center: [108.9470386505, 34.2593889736], // 地图中心点
zoom: 16 // 地图显示的缩放级别
})
// 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺
// 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)
// 公交站点查询
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Transfer', 'AMap.Geolocation', 'AMap.StationSearch'], () => {
this.map.addControl(new AMap.ToolBar())
this.map.addControl(new AMap.Scale())
this.map.addControl(new AMap.Transfer())
this.map.addControl(new AMap.Geolocation())
this.map.addControl(new