首先申请高德地图的官方appkey
vue项目,静态地图,打点 可以选择web端(js Api),(非web服务),微信小程序使用微信小程序, 注: uni-app 可以选择腾讯地图更好,适配性更好
申请完appkey后
在自己的页面 引入key
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=fa128a94d****907e0&plugin=AMap.MapType"></script>
<div id="container" style="height: 266px;width: 100%"></div>
createMap(longitude,latitude) {
//1.地图初始化时,在地图上添加marker标记,鼠标点击marker可弹出自定义的信息窗体
var mapData = new AMap.Map('container', {
resizeEnable: true,
center: [longitude,latitude], //地图中心点位置
zoom: 18,
})
var marker = new AMap.Marker({
position: new AMap.LngLat(longitude,latitude), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: '淄博'
});
// 将创建的点标记添加到已有的地图实例:
mapData.add(marker);
let self=this
AMap.event.addListener(marker, 'click', (e) => {
self.markerClick(marker,e)
})
return mapData
},
markerClick(marker,e){
this.show=true
this.mapDatas.longitude=marker.Qi.position.lng
this.mapDatas.latitude=marker.Qi.position.lat
},
setMap(item,index){
if(this.oldIndex==null){
}else{
document.getElementsByClassName('contentTr')[this.oldIndex].classList.remove("blue")
}
this.oldIndex=index
document.getElementsByClassName('contentTr')[index].classList.add("blue")
getLongitudeAndLatitude(item.address).then(res=>{
this.mapDatas={
name:item.name,
address:item.address,
longitude:res.data.longitude,
latitude:res.data.latitude,
}
this.createMap(this.mapDatas.longitude, this.mapDatas.latitude)
})
},
最后 可以调起高德app
window.open(`https://uri.amap.com/navigation?to=${this.mapDatas.longitude},${this.mapDatas.latitude},${this.mapDatas.name},${this.mapDatas.address}&mode=car&policy=0&src=mypage&coordinate=gaode&callnative=1`)