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

2020-08-25 11:38:28 3.1万阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

微信小程序中腾讯地图与高德地图坐标转换实战本文针对微信小程序开发中同时使用腾讯地图与高德地图时遇到的定位漂移问题，提供了完整的坐标转换实战方案。文章深入分析了问题根源在于WGS-84与GCJ-02坐标系差异，并详细介绍了如何使用coordtransform库进行精确转换，涵盖从库的安装引入、核心转换代码实现到与地图组件结合的全流程，帮助开发者彻底解决多地图服务集成时的定位不准难题。阅读详情



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

	}