Recently I luked a small program on wechat, map access stepped on a lot of pits.

Applets map document

2 Tencent map access small program SDK

3. Batch conversion of other coordinates to Tencent coordinates

1: create

Simply create a small program, create a map folder, and start our masturbation journey

2: configuration

Wechat mini program has its own part of the map function, set some registration points, but if you need more powerful query function, you need to access the map API, commonly used Autonavi/Baidu/Sogou have small program access API, in order to facilitate debugging and better compatibility, we choose their own Tencent map. map.js

var QQMapWX = require('.. //utils/qqmap-wx-jssdk.js'); Var qqmapsdk = new QQMapWX({key:'5IEBZ-O7UWD-O2S4L-PJJFK-P6DPO-xxxx'// Mandatory key});Copy the code

The key application method is detailed in link 2

1 the pit

Apis.map.qq.com is an invalid domain name. The request domain name needs to be added

Wechat Open Platform > Development > Development Settings > Server domain name

3: registration point/multi-point

map.wxml

<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

The most commonly used coordinates are longitude latitude, which is where you currently display the map

Scale: Scale level

Style:

2. She is the mark of the animal.

Markers can be set to one or more markers, as specified in the 1 link

addMarkers: function(data) {var that = this // change the pointer to var MKS = [] // array containerfor(var i = 0; i < length; I ++) {mks.push({// Put the data coordinates into the MKS array latitude: that.data[I].lat, longitude: that.data[I].lng, iconPath: ZIndex: -1, callout: {// Click the registration point pop-up name box content: that.data[I]. Name, // box display name color:'# 000000', // font color borderRadius: 10, // borderWidth: 1, // borderWidth borderColor:'#FF0202'// Border colorbgColor: '#ffffff', // Background color padding: 5, // text margin white textAlign:'center', // center display:'ALWAYS'// Display the name pop-up box'BYCLICK'} that. SetData ({//set【 commonly 】 markers: MKS,})}Copy the code

Multipoint display effect

4: polygon polygon

Sometimes it is necessary to draw regions, polygons, and use polygon in map. Points are the coordinates of polygons

Var ring2 = [{latitude: 30.003894, longitude: 120.888613}] // Polygon: [{points: ring2, strokeWidth: 1, // Width of stroke strokeColor:'#E33E33'// The color of the stroke fillColor:'#e0b9b7'// Fill color}]Copy the code

Polygons =”{{polygon}}” in map. WXML

1 the pit

Sometimes there are problems with coordinate point prompt box and polygon covering.

Pit 2

Polygon coordinate points sets may have an upper limit.

5: Coordinate system transformation

Because the coordinates of the data source may be GPS coordinates or Mars coordinates, or other maps may bring coordinates. Tencent map has its own coordinate conversion method, convenient positioning accuracy interface in the top link 3

Locations = 39.12, 116.83; //locations wx.request({url:'https://apis.map.qq.com/ws/coord/v1/translate'Data: {locations: locations, // Pass coordinatestype: 1, // There is an introduction key in the type link passed in:'5IEBZ-O7UWD-O2S4L-PJJFK-P6DPO-xxx'// Your key}, success(res) {console.log(res.data) // return coordinates in locations}}),Copy the code

1 the pit

Note: Multiple coordinates are separated by a semicolon, but the last one is not passed with a semicolon.

locations = locations.substring(0, locations.lastIndexOf('; ')); // Remove the last semicolonCopy the code

Pit 2

Coordinate system conversions are limited to a string limit of 1000, so when they are over, they must be converted in batches

I Promise