Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to solve the problem of Tencent Map display deviation in WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to solve the problem of Tencent Map display deviation in WeChat Mini Programs"!

Background

Using the map component in Mini Program, you can call Tencent Map's API to mark some fixed points on the map interface. The longitude and latitude of the points are obtained through the Baidu map API on the android, so setting this location information directly will have a deviation, and the deviation is relatively large.

Mini Program sets the location point

For more information about how to set location points on map components, please refer to Tencent's official documentation.

First take a look at the map components:

Its markers is an array of location points that need to be set in the map interface, and the elements in the array are an object.

Markers: [{iconPath: "/ resources/others.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50}, iconPath: "/ resources/others.png", id: 0, latitude: 23.094994, longitude: 113.424520, width: 50, height: 50}]

If the latitude and longitude here directly locate the point on other maps, then the same point will deviate in Mini Program.

Reason

The default location method in Mini Program is wgs84, while Baidu Maps uses BD09 and gcj02. So there will be a deviation here.

Solution

Convert the location information once using the offline js library gcoord

First of all, download the js library and put it in a directory. I am here under utils.

Import in the desired interface

Import gcoord from'.. / utils/gcoord.js'

Call the conversion function

Var result = gcoord.transform ([resArr [I] .JD, resArr [I] .WD], / / latitude and longitude coordinates gcoord.BD09, / / current coordinate system (Baidu) gcoord.GCJ02)

Here in Mini Program, it is changed to gcj02, national test data, so it is changed to gcj02.

At this point, I believe you have a deeper understanding of "how to solve the problem of Tencent Map display deviation in WeChat Mini Programs". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.