1、 申请高德地图key
2、配置工程
3、使用
1、在使用地图的页面引入amap-wx.js文件
import amapFile from '../../libs/amap-wx.130.js'
2、 简单引入
<template>
<map class="map" id="map" :longitude="longitude" :latitude="latitude" :scale="scale" show-location="true" @markertap="markertap($event)" :markers="markers" ></map>
</template>
<script>
export default {
data(){
return {
markers:[],
chooseLocation:'',
scale:15,
map:'',
}
},
onReady() {
this.map = new amapFile.AMapWX({key:'818dc464b70cfe7c506489643c84a4b5'}); //申请的key
}
}
</script>
3、api的使用
1、定位
this.map.getRegeo({
success:(res)=>{
console.log(res)
},
fail:(err)=>{
console.log(err)
}
})
2、将指定位置移动到屏幕中心
<map class="map" id="map" :longitude="longitude" :latitude="latitude" ></map>
//只需改变绑定的longitude与latitude的值即可
this.latitude = 37.365244
this.longitude = 112.365244
3、添加marker / 修改marker
<map class="map" id="map" :markers="markers" ></map>
//只要将marker添加在绑定的marker的数组中就可以了
//修改marker,只要修改markers中对应的数据就可以
addMarkers() {
let _markers = []
this.storesList.forEach((v,i)=>{
if( v.addrLatitude<90){
const marker = {
id: v.id,
iconPath: '../../static/nearbyStores/current_img.png',
width: 20,
height: 34,
latitude:v.addrLatitude,
longitude:v.addrLongitude
};
_markers.push(marker)
}
})
this.markers = _markers
},
4、点击marker
<map class="map" id="map" @markertap="markertap($event)" ></map>
// 点击marker,绑定@markertap
markertap(e){
this.storesList.forEach((v,i)=>{
if(e.detail.markerId == v.id){
//跳转到高德app或者腾讯app
uni.openLocation({
latitude: v.addrLatitude,
longitude: v.addrLongitude,
name: v.name,
address: v.addressLocation,
success: function (res) {
console.log("跳转高德appsuccess",res);
},
fail: (err) => {
uni.showToast({
title:err,
icon:'none',
duration:3000
})
}
});
}
})
},
5、地图的放大与缩小
<map class="map" id="map" :scale="scale" ></map>
//只需改变scale的大小即可
this.scale = 18
6、计算两地之间的距离(如果官方没有提供相应的api,可以使用这个)
// 计算指定地点与各个门店的距离
distance(longitude,latitude) {
this.storesList.forEach(v=>{
let PI = 3.14159265358979323;//圆周率
let R = 6371229;//地球半径
// 指定位置
var lon1 = longitude;
var lat1 = latitude;
// 某个门店的位置
var lon2 = v.addrLongitude;
var lat2 = v.addrLatitude;
let x,y,distance;
let lonres = lon1 > lon2?lon1-lon2:lon2-lon1;
let latres = lat1 > lat2?lat1-lat2:lat2-lat1;
x = (lonres) * PI * R * Math.cos(((lat1 + lat2) / 2) * PI / 180) / 180;
y = (lat2 - lat1) * PI * R / 180;
distance = Math.hypot(x, y);
this.$set(v,'distanceNum',distance)
})
this.storesList = this.storesList.sort(function (e, f) {
return e.distanceNum - f.distanceNum
})
this.storesList.forEach(v=>{
let disCH = ''
if(v.distanceNum > 0){
if(v.distanceNum>1000){
disCH = (v.distanceNum/1000).toFixed(1)+'km'
}else{
disCH = v.distanceNum.toFixed(1)+'m'
}
}else{
disCH = '未知'
}
this.$set(v,'disCH',disCH)
})
},