微信小程序使用高德地图最后在手机上显示的地图是腾讯地图为什么

葉幺 2020-08-25 11:38:28



<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;

	}