Wechat applet - add map, click on map and customize map

Catalog

1. summary

1.1 development tools

1.2 development framework

1.3 version number

2. Add map

3. Mapping

4. Personalized map

4.1 ability to apply for personalized map

4.2 add applet personality map

4.3 custom map

1. summary

1.1 development tools

Wechat developer tools, sublime, git

1.2 development framework

wepy2.0

1.3 version number

Wechat developer tools 2.9.5, sublime3.2.2, weby2.0

2. Add map

Refer to official documents: https://developers.weixin.qq.com/miniprogram/dev/component/map.html

<template>
  <map style="width: {{mapWidth }}rpx; height: {{mapHeight}}rpx;"/>
</template>
<script>
  import wepy from "@wepy/core"
  wepy.page({
    data: {
      mapWidth:'',
      mapHeight:''
    },

    onLoad () {
      var sy = wx.getSystemInfoSync(),
      mapWidth = sy.windowWidth*2,
      mapHeight = sy.windowHeight*2;
      this.mapWidth = mapWidth,
      this.mapHeight = mapHeight
    }
  })
</script>

tips:

  1. Show location displays the current location point with direction. This project does not need to add.

  2. scale="4" scale, scale level, value range: 3-20

3. Mapping

<template>
  <map style="width: {{mapWidth }}rpx; height: {{mapHeight}}rpx;" markers="{{markers}}" include-points="{{markers}}"/>
</template>
<script>
  import wepy from "@wepy/core"
  wepy.page({
    data: {
      mapWidth:'',
      mapHeight:'',
      markers: [
        {
          iconPath: "../public/markers.png",
          id: 0,
          latitude: 30.281714,
          longitude: 120.180895,
          width: 40,
          height: 40,
          label: {
            content: "Lower City",
            color: "#fff",
            fontSize: 12,
            anchorX: -(0.5 * (3 * 24))/2,
            textAlign: "center"
          }
        },
        {
          iconPath: "../public/markers.png",
          id: 1,
          latitude: 40.380874,
          longitude: 116.852466,
          width: 40,
          height: 40,
          label: {
            content: "Erdos",
            color: "#fff",
            fontSize: 12,
            anchorX: -(0.5 * (5 * 24))/2,
            textAlign: "center"
          }
        }
    },

    onLoad () {
      var sy = wx.getSystemInfoSync(),
      mapWidth = sy.windowWidth*2,
      mapHeight = sy.windowHeight*2;
      this.mapWidth = mapWidth,
      this.mapHeight = mapHeight
    }
  })
</script>

tips:

  1. Add the marketers. Currently, wechat developer 2.10.0 will appear: Cannot read property 'anchorX' of undefined, just change to a lower version.
  2. Include points scales the field of view to include all given coordinate points
  3. If the icons of the markers want to be round, they can make the design into a circle directly. Use iconPath to add
  4. The problem that the content in the label cannot be centered:
    anchorX: -(0.5 * (name.length * fontsize))/2, which is the solution seen on the Internet.
    For example:
    label: {
      content: "Erdos",
      color: "#fff",
      fontSize: 12,
      anchorX: -(0.5 * (5 * 24))/2,
      textAlign: "center"
    }
    Here, the content is set to name.length+1 because there will be an offset on the real machine, and + 1 is just in the middle... fontSize I don't know why it's double
    In any case, this setting centers the text of the label. I hope the official can adjust to the center
  5. Maps that are not generated for map width and height become very small in the upper left corner
  6. At present, it seems that text shading and other attributes are not supported

4. Personalized map

4.1 ability to apply for personalized map

Developer developer tools Tencent location services

      

 

4.2 add applet personality map

Console key management style selection

 

 

<map style="width: 100%; height: {{mapHeight}}rpx;" scale="4" subkey="Your key" markers="{{markers}}" include-points="{{markers}}"/>

tips: here write the width as the previous {{mapWidth}}rpx. The developer program is OK. There will be a white edge on the right side of the real machine. Change it to width: 100%, and the width of the parent box will also be 100%. The white edge will disappear.

Title

Why can't we put a piece.......

 

4.3 custom map

Console - Personalized map - style selection - edit style

It can modify the display, hiding and color of sidelines, blocks, etc

tips:

  1. Save after modification, console - Personalized map - my style - apply style settings - edit, click to select the picture under the map style, and replace the custom style
  2. The developer tool does not display the custom style. Use the real machine to view it.
  3. After changing the style, the code does not need to be changed or re uploaded.

 

Published 16 original articles, won praise 4, visited 3486
Private letter follow

Tags: sublime git

Posted on Wed, 15 Jan 2020 03:56:45 -0500 by pinehead18