<template>
<view class="content">
<view class="map_container">
<map class="map" id="map" :longitude="longitude" :latitude="latitude" scale="14" show-location="true" :markers="markers" bindmarkertap="makertap"></map>
</view>
<view class="map_text">
<text class="h1">{{textData.name}}</text>
<text>{{textData.desc}}</text>
</view>
</view>
</template>
// import amapFile from "@/libs/amap-wx.js";
var amapFile=require('@/libs/amap-wx.js');
var markersData = [];
export default {
data() {
return {
markers: [],
latitude: '',
longitude: '',
textData: {}
}
},
makertap: function(e) {
var id = e.markerId;
var that = this;
that.showMarkerInfo(markersData,id);
that.changeMarkerColor(markersData,id);
},
onLoad: function() {
var that = this;
var myAmapFun = new amapFile.AMapWX({key:'高德地图小程序Key'});
myAmapFun.getPoiAround({
iconPathSelected: "/static/marker_checked.png", //如：../../img/marker_checked.png
iconPath: "/static/marker.png", //如：../../img/marker.png
success: function(data){
console.log(data)
markersData = data.markers;
that.markers = markersData
that.latitude = markersData[0].latitude
that.longitude = markersData[0].longitude
that.showMarkerInfo(markersData,0);
},
fail: function(info){
uni.showModal({title:info.errMsg})
}
})
},
methods: {
showMarkerInfo: function(data,i){
this.textData = {name: data[i].name,desc: data[i].address}
},
changeMarkerColor: function(data,i){
var that = this;
var markers = [];
for(var j = 0; j < data.length; j++){
if(j==i){
data[j].iconPath = "/static/marker_checked.png"; //如：../../img/marker_checked.png
}else{
data[j].iconPath = "/static/marker.png"; //如：../../img/marker.png
}
markers.push(data[j]);
}
this.markers = markers
}
}
}
.map_container{
position: absolute;
top: 0;
bottom: 80px;
left: 0;
right: 0;
}
.map{
width: 100%;
height: 100%;
}
.map_text{
position: absolute;
left: 0;
right: 0;
bottom: 0px;
height: 80px;
background: #fff;
padding: 0 15px;
}
text{
margin: 5px 0;
display: block;
font-size:12px;
}
.h1{
margin: 15px 0;
font-size:15px;
}
最后显示出来的图标显示腾讯地图
