uniapp WeChat mini program uses Gaode map to customize bubbles

foreword

We often say that the uniapp or native WeChat applet framework uses Gaode map, not the ui is the Gaode map, but the Gaode map used by the api, and the ui is still the built-in map of the framework, that is to say, the map and api are separated , The built-in map of the WeChat applet is naturally Tencent Maps.

Gaode map

The api of Gaode map includes two parts: server and client. Frequently used api methods include longitude and latitude address analysis and reverse analysis, and obtaining POI (Point of Interest). POI refers to points of interest. Common POIs have keyword search , surrounding search, polygonal area search, route planning, etc. If the client uses AutoNavi, there are PC web versions, Android versions, IOS versions, and WeChat mini-program versions. There are differences between each version. For example, the WeChat applet version has few api methods, but the pc web version has many api methods.

Native WeChat applet map component

The map control of the native WeChat applet provides attributes such as path planning, markers, labels, and bubbles.

<map 
		id="map"
	    longitude="{
   
   {longitude}}" 
		latitude="{
   
   {latitude}}"
 		scale="14"
 		show-location="true"
         markers="{
   
   {markers}}" 
         bindmarkertap="makertap"></map>

Give a few common attributes of the map component

• markers, mark points
  • It is a marker array, marker object format {id, latitude, longitude, title...}
• polyline, route
  • It is an array of routes, route object {points:[{longitude,latitude}],color}
• include-points, zoom the field of view to include all given coordinate points
  • It is an array of coordinate points, and the coordinate point format is {longitude,latitude}. The
    map component of uniapp is very similar to the map component of WeChat applet, and can be considered the same.

Markers vs Labels vs Bubbles

There are three commonly used concepts in the map, marker, label, and bubble callout. These three are different. You can see the figure below. The red ones are markers, bubbles, and labels that are marked with text.

Here is an example of a WeChat native applet. The following code is modified based on the Gaode WeChat applet plug-in sample . The key code is as follows. The getPoiAround method is used in the code .

var that = this;
var myAmapFun = new amapFile.AMapWX({key:'高德key'});
myAmapFun.getPoiAround({
  success: function(data){
    markersData = data.markers;
    markersData.forEach(marker=>{
      marker.label={content:"标签："+marker.name,bgColor:"#d3cd9c",padding:5,borderWidth:1,borderRadius:4}
      marker.callout={content:"气泡:"+marker.name,bgColor:"#ebc3c3",display:"ALWAYS",padding:5,borderWidth:2,borderRadius:4}
    })
    that.setData({
      markers: markersData
    });
  }  
},

Common requirements and implementation principles

mark point

The principle of marking points is to assemble the coordinates of the target points into a markers structure, and then assign values ​​to it.

route planning

The principle of route planning is very simple. Through the AutoNavi getDrivingRoute method (of course, there are also methods such as cycling, walking, and public transportation), and then assembled into a polyline data format. By the way, the coordinate parameters and formats of the AutoNavi API method are both Yes 经度,纬度, longitude first, latitude last, separated by commas.

Markers near the route

The application scenario of this is usually, after the path is planned from A---->B, it is necessary to display the gas stations (or tourist attractions) near the path, etc. Its implementation principle is that the path is composed of a series of coordinate points. By filtering and calculating the distance from all gas stations to the line connecting the coordinates (mysql has a corresponding geographical function), the coordinates of the target gas station are obtained, and then returned to the front end. Mark on the map through the map's marker point api.

• Front-end, obtain a series of coordinates for the path planning of A->B
  • Use the AutoNavi getDrivingRoute method to assemble the coordinates into a string, refer to the points format in the StationsNearbyLineQuery below.
• Back-end interface, receiving a series of coordinates, take java as an example

/**
 * @description: 获取路线沿途的站点
 */
@Data
public class StationsNearbyLineQuery {

    /**
     * 坐标点，p1[,p2]...
     * p1格式：经度  纬度
     * 一言一概之，点与点之间逗号分隔，经纬度空格分隔
     */
    @NotBlank
    private String points;

    /**
     * 搜索范围(米)
     */
    private Integer distance;

}
/**
 * 获取路线沿途的站点
 * @param query 查询条件
 * @return
 */
@PostMapping("/getStationsNearbyLine")
public List<MerchantsVO> getStationsNearbyLine(@Valid @RequestBody StationsNearbyLineQuery query){
   //执行sql查询目标站点
}

• mysql calculates the distance from all gas stations to the path, and filters out the stations within the range
  • select * from 加油站 where ST_Distance( ST_GeomFromText(concat('LINESTRING(', #{points}, ')')), POINT(longitude, dimensionality) ) * 111195 <= #{distance}
  • The reason for multiplying by 111195 here is that st_distancethe unit of the calculation result is degrees, and it needs to be multiplied by 111195 (radius of the earth 6371000*PI/180) to convert the value into meters.
• front-end annotation

custom bubble

To customize the bubble, use the customcallout attribute in the marker object. For details, please refer to the custom bubble customCallout on the marker

The method of use is as follows, add a slot node named callout under the map component, and its internal cover-view is bound to the marker through the marker-id attribute
. When the marker is created, the content displayed by the cover-view will be displayed above the marker point as a callout.

<map>
  <cover-view slot="callout">
  //如果是动态的，则用wx:for之类的动态生成，因为map是较高层级组件，为了实现实现遮挡，
  //必须要用cover-view，它的层级高过map
    <cover-view marker-id="1"></cover-view>
    <cover-view marker-id="2"></cover-view>
  </cover-view>
</map>

corresponding to each marker object to be specifiedcustomCallout

marker:{
	id:"",
	customCallout: {
	     display: "ALWAYS"
	 },
}

In addition to the above, it also provides methods such as click on the mark bindmarkertap, click on the label bindlabeltap, click on the bubble bindcallouttap, etc., and have achieved custom effects.

Summarize

When doing a demo, you can use the original WeChat framework for testing. The Gaode WeChat applet plug-in provides sample code , because the step of translating uniapp into a native WeChat applet is missing , the code looks more intuitive and easy to debug, and the WeChat applet The map documentation has to be better too.