This is the article I wrote on my personal blog

background

Using the map component in the small program, you can call Tencent map API and mark some fixed points to the map interface. The longitude and latitude of the points is obtained through the Android Side Baidu map API, so there will be a deviation at this time to directly set the location point information, and the deviation is relatively large

Applets set position points

For details on how to set location points on the map component, please check the official document of Tencent.

<map ID ="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindControlTap =" controlTap"  markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;" ></map>Copy the code

Its markers are groups of points that need to be placed on the map interface, and an element in the array is an object.

[{iconPath: "/resources/others.png", ID: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 300 50}, iconPath: "/resources/others.png", id: 0, latitude: 23.094994, longitude: 113.424520, width: 50, height: 50},Copy the code

If latitude and longitude are given directly to points on other maps, the same point will be distorted in the applet.

why

The default positioning method in the small program is WGS84, and baidu map is used in BD09, and GCJ02. So there’s a bias here.

The solution

The offline JS library GCOord is used to convert the location information.

  • First, download the js library and put it in a directory, in this case utils
  • Import it on the required page
import gcoord from '.. /.. /.. /utils/gcoord.js'Copy the code
  • Call the conversion function
Var result = gcoord.transform([resArr[I].jd, resArr[I].wd], // gcoord.gcj02);Copy the code

Here in the small program modified to GCJ02, national test data, so changed to GCJ02;

The last

  • This article is my humble opinion, if there is any discrepancy, welcome to correct.
  • Welcome to follow: Jia Jia Talk