The final result

One, to achieve the function

  • Show the map.

    • referencemapcomponent

  • Display multiple stores on the map.

    • markerMarker points are used to display the location of markers on a map.

  • Click the store enlargement icon to display the selected store information.

    • Change the size of the selected store’s mark.

  • Place a visual marker in the center of the map.

    • cover-viewThe tag places a tag image, positioned in the center of the map size, and debugs itself.

  • After moving, get the center position of the map and select the nearest store.

    • mapthebindregionchangeEvent, triggered when the field of view changes, re-request, put the latest store to modify the mark size (Precautions).

  • After moving, the inverse address is resolved into Chinese address according to the screen center coordinate (see fourth for details).

  • Added select other cities page (packaged as a component,Click here to see).

  • Click on other cities, resolve them into coordinates according to the city name and address, and update the view (see fourth in detail).

Two, matters needing attention

  • This is triggered every time the view is updatedbindregionchangeEvent that causes this event to trigger repeatedly if the map view center coordinates are retrieved and reassigned to the map coordinates.
  • Every time you drag the center point of the view, you need to re-request the store near the coordinates. Pay attention to encapsulation methods
  • Labels displayed on maps must be usedcover-vieworcover-image

Iii. Related technologies and links

  • The map component of the applet
  • Tencent map micro channel small program javaScript SDK, address resolution (Chinese address to Coordinate) and reverse address resolution (Chinese address to coordinate)

Iv. Tencent Map wechat small program javaScript SDK use

Use the way to go directly to the official documentation, the introduction is also very detailed. Download js files directly, and then import. Instead of es6 expost default/import to export imports

export default QQMapWX
Copy the code

Then instantiate the API core class in onLoad using page import.

//index.vue
import QQMapWX from "@/utils/qqmap-wx-jssdk"; // reverseGeocoderexport default {
    data() {return{qqmapsdk: null, // instantiate map SDK}},onLoad(){this.qqmapsdk = new QQMapWX({key:"3P2BZ-6G***-C***3-***5G-3VDYH-N5BGH"/ / required}); }}Copy the code

Inverse resolution of detailed addresses based on coordinates

// Inversely resolve the detailed address according to the coordinatesgetCityinfo() {
      return new Promise((resolved, rejected) => {
        const that = this;
        this.qqmapsdk.reverseGeocoder({
          location: {
            latitude: this.latitude,
            longitude: this.longitude
          },
          success(res) {
            console.log("Address transcoding succeeded", res);
            const _res = res.result;
            that.cityName = _res.address_component.city;
            that.update({
              cityName: _res.address_component.city,
              nowPlace:
                _res.formatted_addresses.recommend + "-" + _res.address
            });
            that.getShopData();
          },
          fail: function(res) { console.log(res); }}); }); },Copy the code

Parsed to coordinates by city/address

// Coordinate by city/addresscityNameGetPosition() {
      return new Promise((resolved, rejected) => {
        const that = this;
        this.qqmapsdk.geocoder({
          address: this.cityName,
          success(res) {
            console.log("Convert coordinates by address", res);
            const _res = res.result.location;
            that.latitude = _res.lat;
            that.longitude = _res.lng;
            that.update({
              latitude: _res.lat,
              longitude: _res.lng
            });
            that.getCityinfo();
          },
          fail(err) {
            console.log("Convert coordinates to ERR by address", err); }}); }); },Copy the code

Five, the realization of part of the code

The request and function logic used should look like this, doing a mind map. (Note: the code may be different from the mind map. The map is a summary of the completed code, which is relatively complete.)

This project is developed using mpvue development small program, MPvue bindregionchange event becomes

// Not mpvue development please ignore @regionChange ="getCenterMap1"
    @end="getCenterMap"
Copy the code

The map component

<div> <! -- Map component --> <map id="map"
          :longitude="longitude"
          :latitude="latitude"
          scale="13"
          :markers="markers"
          @markertap="markertap"
          @regionchange="getCenterMap1"
          @end="getCenterMap"
          show-location
          style="width:750rpx; height:99vh;"> </map> <! -- center --> <cover-image class="centerImg"
        src="/static/images/person.png"></cover-image> <! < cover-image@click ="getMyPosition"
          class="backMyPosition"
          src="/static/images/location.png"
        ></cover-image>
    </div>
Copy the code

Get self location wx.getLocation

// Get the locationgetMyPosition() {
      return new Promise((resolved, rejected) => {
        wx.getLocation({
          type: "wgs84",
          success: data => {
            // console.log(data,"Wechat Map")
            this.latitude = data.latitude;
            this.longitude = data.longitude;
            this.$store.commit("update", { latitude: data.latitude, longitude: data.longitude }); This.getcityinfo (). Then (() => {resolved(); }); },fail() {// failed callback // If the user refuses authorization, default is Beijing this.cityname ="Beijing";
            this.update({ cityName: "Beijing"}); }}); }); },Copy the code

Triggered when map view is updated

// Map view is updatedgetCenterMap() {
      if (this.active === "The door") {
        const that = this;
        console.log("Self position coordinates", this.longitude, this.latitude);
        const map = wx.createMapContext("map"); Map.getcenterlocation ({success(res) {// Determine the coordinates are consistentif (
              that.longitude === res.longitude &&
              that.latitude === res.latitude
            ) {
              return false;
            }
            //  const ress =  transformFromGCJToWGS(res.latitude,res.longitude)
            that.latitude = res.latitude;
            that.longitude = res.longitude;

            that.$store.commit("update", {
              latitude: res.latitude,
              longitude: res.longitude
            });
            console.log("Central position coordinates", that.longitude, that.latitude);
            // console.log('Transformed central position coordinates',ress) that.getCityinfo(); }}); }}Copy the code