tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Cloud Mini Program Platform
    Documentation
    Download PDF

    Map Component

    Last updated: 2024-11-21 18:41:53
    Download PDF

      map

      Feature Description: Map. This component is a native component, so mind the associated limitations when using it. For related APIs, see createMapContext.
      Compatibility Description:
      System Map: Only supported on iOS.
      Google Maps: Supported on Android and IDE.
      Huawei Map: Only supported on Android.
      Tencent Map: Supported on Android and IDE.
      Note：
      Exclusive for China：Tencent Map、Baidu Map.
      Attribute
      Type
      Default value
      Required
      Description
      iOS Compatibility
      Android Compatibility
      IDE Compatibility
      
      
      type
      string
      tencent
      No
      Map Type: Tencent or Google
      No
      No
      Yes
      
      
      longitude
      number
      -
      Yes
      Central Longitude
      Yes
      Yes
      Yes
      
      
      latitude
      number
      -
      Yes
      Central Latitude
      Yes
      Yes
      Yes
      
      
      scale
      number
      16
      No
      Scaling level, ranging from 3 to 20.
      Yes
      Yes
      Yes
      
      
      min-scale
      number
      3
      No
      Minimum scaling level
      
      Yes
      Yes
      
      
      max-scale
      number
      20
      No
      Maximum scaling level
      
      Yes
      Yes
      
      
      markers
      array.<marker>
      -
      No
      Marker Point
      Yes
      Yes
      Yes
      
      
      polyline
      array.<polyline>
      -
      No
      Route
      Yes
      Yes
      Yes
      
      
      circles
      array.<circle>
      -
      No
      Circle
      Yes
      Yes
      Yes
      
      
      controls
      array.<control>
      -
      No
      Widget
      No
      No
      No
      
      
      include-points
      array.<point>
      -
      No
      Scale the view to contain all given coordinate points.
      Yes
      Yes
      Yes
      
      
      show-location
      boolean
      false
      No
      Display the current location point with direction.
      Yes
      Yes
      Yes
      
      
      polygons
      array.<polygon>
      -
      No
      Polygon
      Yes
      Yes
      Yes
      
      
      subkey
      string
      -
      No
      Key used for personalized map customization.
      No
      No
      Of type 'Tencent'.
      
      
      layer-style
      number
      1
      No
      The style configuration of the personalized map does not support dynamic modifications.
      No
      No
      No
      
      
      rotate
      number
      0
      No
      Rotation angle, ranging from 0 to 360, represents the angle between the map's true north and the device's Y-axis.
      No
      Yes
      No
      
      
      skew
      number
      0
      No
      Inclination angle, ranging from 0 to 40, represents the tilt angle about the Z-axis.
      System Map: No
      Tencent Map: Yes
      Baidu Map: Yes
      Amap: Yes
      Yes
      No
      
      
      enable-3D
      boolean
      false
      No
      Display 3D building blocks
      System Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      Google Map: Yes
      Huawei Map: Yes
      Tencent Map: Yes
      Baidu Map: Yes
      Amap: No
      No
      
      
      show-compass
      boolean
      false
      No
      Display the compass
      Yes
      Yes
      No
      
      
      show-scale
      boolean
      false
      No
      Display the scale bar
      Yes
      Google Map: No
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: Yes
      Amap: Yes
      Yes
      
      
      enable-overlooking
      boolean
      false
      No
      Enable overhead view
      System Map: No
      Tencent Map: Yes
      Baidu Map: Yes
      Amap: Yes
      Yes
      No
      
      
      enable-zoom
      boolean
      true
      No
      Whether scaling is supported
      Yes
      Yes
      Yes
      
      
      enable-scroll
      boolean
      true
      No
      Whether dragging is supported
      Yes
      Yes
      Yes
      
      
      enable-rotate
      boolean
      -
      No
      Whether rotation is supported
      Yes
      Yes
      Yes
      
      
      enable-satellite
      boolean
      false
      No
      Whether satellite imagery is enabled
      Yes
      Google Map: Yes
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: Yes
      Amap: Yes
      Type=google
      
      
      enable-traffic
      boolean
      false
      No
      Whether the real-time traffic feature is enabled
      Yes
      Yes
      Yes
      
      
      enable-poi
      boolean
      true
      No
      Whether display POI points
      System Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      Google Map: Yes
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: Yes
      Amap: Yes
      Type=google
      
      
      enable-building
      boolean
      true
      No
      Whether display buildings
      System Map: No
      Tencent Map: Yes
      Baidu Map: Yes
      Amap: Yes
      Google Map: Yes
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: Yes
      Type=google
      
      
      setting
      object
      -
      No
      Configuration
      No
      No
      Yes
      
      
      bindtap
      eventhandle
      -
      No
      Triggered upon clicking the map, returning latitude and longitude information.
      Yes
      Yes
      Yes
      
      
      bindmarkertap
      eventhandle
      -
      No
      Triggered upon clicking the marker point, e.detail = {markerId}
      Yes
      Yes
      Yes
      
      
      bindlabeltap
      eventhandle
      -
      No
      Triggered upon clicking the label, e.detail = {markerId}
      Yes
      No
      Of type 'Tencent'.
      
      
      bindcontroltap
      eventhandle
      -
      No
      Triggered upon clicking the control, e.detail = {controlId}
      No
      No
      No
      
      
      bindcallouttap
      eventhandle
      -
      No
      Triggered upon clicking the bubble corresponding to the marker point, e.detail = {markerId}
      No
      No
      Yes
      
      
      bindupdated
      eventhandle
      -
      No
      Triggered upon the completion of the map's rendering update.
      No
      Yes
      Yes
      
      
      bindregionchange
      eventhandle
      -
      No
      Triggered twice when the field of view changes, returning type values of 'begin' and 'end' respectively.
      Yes
      Yes
      Yes
      
      
      bindpoitap
      eventhandle
      -
      No
      Triggered upon clicking the map's POI point, e.detail = {name, longitude, latitude}
      No
      Yes
      Yes
      
      
      bindanchorpointtap
      eventhandle
      -
      No
      Triggered upon clicking the location marker, e.detail = {longitude, latitude}
      No
      No
      No
      
      

      Return value of 'regionchange'

      Feature Description: When the field of view changes, 'regionchange' is triggered twice, returning type values of 'begin' and 'end' respectively.
      During the 'begin' phase, 'causedBy' is returned, with valid values being 'gesture' (triggered by gesture) and 'update' (triggered by interface).
      During the 'end' phase, 'causedBy' is returned, with valid values being 'drag' (caused by dragging), 'scale' (caused by scaling), and 'update' (caused by calling the update interface).
      e = {causedBy, type, detail: {rotate, skew, scale, centerLocation, region}}

      setting

      Feature Description: Provides a 'setting' object to uniformly configure the map.
      Sample Code
      // Default Value
      const setting = {
        rotate: 0,
        showLocation: false,
        subKey: '',
        layerStyle: 1,
        enableZoom: true,
        enableScroll: true,
        enableRotate: false,
        showCompass: false,
        enableSatellite: false,
      }
      
      this.setData({
        // Only the attributes that are set will take effect, and others will remain unaffected.
        setting: {
          enableZoom: false,
          enableScroll: false,
        }
      })

      maker

      Feature Description: The marker point is used to display the marked location on the map.
      Attribute
      Description
      Type
      Required
      Remarks
      Supported on iOS
      Supported on Android
      Supported on IDE
      id
      Marker Point ID
      number
      No
      The callback of a marker click event will return this ID.
      Yes
      Yes
      Yes
      clusterId
      Cluster ID
      number
      No
      Used when customizing the effect of point aggregation clusters.
      No
      No
      No
      joinCluster
      Whether participate in point aggregation
      boolean
      No
      No participation by default
      No
      Google Map: Yes
      Huawei Map: Yes
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      No
      latitude
      Latitude
      number
      Yes
      Number of floating points, ranging from -90 to 90.
      Yes
      Yes
      Yes
      longitude
      Longitude
      number
      Yes
      Number of floating points, ranging from -90 to 90.
      Yes
      Yes
      Yes
      title
      Marker point name
      string
      No
      Displayed upon clicking, will ignored if callout exists.
      Yes
      Yes
      Of type 'Tencent'.
      zIndex
      Display Level
      number
      No
      -
      No
      Yes
      Yes
      iconPath
      Displayed Icon
      string
      Yes
      Image path under the project directory, supporting network path, local path, and code package path.
      Yes
      Yes
      Yes
      rotate
      Rotation angle
      number
      No
      The angle of clockwise rotation, ranging from 0 to 360, with a default of 0.
      No
      Yes
      Of type 'Tencent'.
      alpha
      Marked transparency
      number
      No
      Ranges from 0 to 1, with a default value of 1 that indicates no transparency.
      No
      Yes
      Of type 'Tencent'.
      width
      Mark icon width
      number/string
      No
      Defaults to the actual image width.
      No
      Yes
      No
      height
      Mark icon height
      number/string
      No
      Defaults to the actual height of the image.
      No
      Yes
      No
      callout
      Bubble window above the marker point.
      object
      No
      See the table below for supported attributes. Newline characters are recognizable.
      Yes
      Yes
      Yes
      customCallout
      Customize the bubble window.
      object
      No
      See the table below for supported attributes.
      No
      No
      No
      label
      Add labels adjacent to the marker points.
      object
      No
      See the table below for supported attributes. Newline characters are recognizable.
      No
      No
      Yes
      anchor
      The latitude and longitude are at the anchor point of the marker icon, defaulting to the midpoint of the bottom edge.
      object
      No
      {x, y}, where x represents the horizontal direction (0-1) and y represents the vertical direction (0-1). {x: .5, y: 1} denotes the midpoint of the bottom edge.
      No
      Yes
      No
      aria-label
      Accessibility, (Attribute) Additional description of the element.
      string
      No
      -
      No
      No
      No
      Note：
      It is recommended to assign a numerical type id to each marker to ensure optimal performance when updating markers.

      The callout bubble on the marker.

      Attribute
      Description
      Type
      iOS Compatibility
      Android Compatibility
      IDE Compatibility
      content
      Text
      string
      Yes
      Yes
      Yes
      color
      Text Color
      string
      No
      Yes
      Yes
      fontSize
      Font Size
      number
      No
      Yes
      Yes
      borderRadius
      Border chamfer
      number
      No
      Yes
      Yes
      borderWidth
      Border Width
      number
      No
      Yes
      Yes
      borderColor
      Outline color
      string
      No
      Yes
      Yes
      bgColor
      Background Color
      string
      No
      Yes
      Yes
      padding
      Text Padding
      number
      No
      Yes
      Yes
      display
      'BYCLICK': Display on Click; 'ALWAYS': Always Visible
      string
      No
      No
      Yes
      textAlign
      Text Alignment Method. Valid values: left, right, center
      string
      No
      Yes
      No
      anchorX
      Horizontal offset, with positive values indicating a shift to the right.
      number
      No
      Google Map: Yes
      Huawei Map: Yes
      Tencent Map: Yes
      Baidu Map: No
      Amap: Yes
      No
      anchorY
      Vertical offset, with positive values indicating a downward shift.
      number
      No
      Google Map: Yes
      Huawei Map: Yes
      Tencent Map: Yes
      Baidu Map: No
      Amap: Yes
      No

      cumtomCallout, custom bubble on the marker

      Function Description: When customCallout is present, the callout and title attributes will be ignored. The custom bubble uses cover-view for customization, offering greater flexibility.
      Attribute
      Description
      Type
      iOS Compatibility
      Android Compatibility
      IDE Compatibility
      display
      'BYCLICK': Display on Click; 'ALWAYS': Always Visible
      string
      No
      No
      No
      anchorX
      Horizontal offset, with positive values indicating a shift to the right.
      number
      No
      No
      No
      anchorY
      Vertical offset, with positive values indicating a downward shift.
      number
      No
      No
      No
      The usage is as follows: Add a slot node named callout under the map component. The cover-view inside is bound to the marker through the marker-id attribute. When the marker is created, the content displayed by this cover-view will be displayed as a callout above the marker point.
      <map>
        <cover-view slot="callout">
          <cover-view marker-id="1"></cover-view>
          <cover-view marker-id="2"></cover-view>
        </cover-view>
      </map>

      Bubble label on the marker

      Attribute
      Description
      Type
      iOS Compatibility
      Android Compatibility
      IDE Compatibility
      content
      Text
      string
      No
      No
      Yes
      color
      Text Color
      string
      No
      No
      Yes
      fontSize
      Font Size
      number
      No
      No
      Yes
      anchorX
      The coordinates of the label, whose origin is the point defined by the longitude and latitude corresponding to the marker.
      number
      No
      No
      Yes
      anchorY
      The coordinates of the label, whose origin is the point defined by the longitude and latitude corresponding to the marker.
      number
      No
      No
      Yes
      borderWidth
      Border Width
      number
      No
      No
      Yes
      borderColor
      Outline color
      string
      No
      No
      Yes
      borderRadius
      Border chamfer
      number
      No
      No
      Yes
      bgColor
      Background Color
      string
      No
      No
      Yes
      padding
      Text padding
      number
      No
      No
      Yes
      textAlign
      Text alignment method. Valid values: left, right, center.
      string
      No
      No
      Yes

      Point Aggregation

      Feature Description: When there are too many markers to be displayed on the map, it may cause overlapping of markers on the interface, incomplete display, and overall performance degradation. To address such issues, we have introduced the point aggregation capability.
      System Map (Supported only on iOS)
      The usage process is as follows:
      MapContext.addMarkers specifies the markers involved in the aggregation.
      (Optional) When MapContext.on('markerClusterCreate', callback) is triggered, the style of the aggregation cluster is updated through MapContext.addMarkers.
      MapContext.removeMarkers removes the markers involved in the aggregation.
      Google Map (Supported only on Android)
      The usage method is to specify joinCluster when adding a marker. Markers that meet the conditions will be automatically aggregated.

      polyline

      Feature Description: Specifies a series of coordinate points, connecting from the first item in the array to the last. When drawing a rainbow line, it is necessary to specify the colors of different segments. For instance, if "points" contain 5 points, then colorList should pass in 4 color values; if the length of colorList is less than points.length - 1, then the color of the remaining segments will remain consistent with the last item.
      Attribute
      Description
      Type
      Required
      Remarks
      iOS Compatibility
      Android Compatibility
      IDE Compatibility
      points
      Array of latitude and longitude coordinates
      Array
      Yes
      [{latitude: 0, longitude: 0}]
      Yes
      Yes
      Yes
      color
      Color of the line
      string
      No
      Hexadecimal
      Yes
      Yes
      Yes
      colorList
      Rainbow Line
      Array
      No
      Ignore the color value when it exists
      No
      Google Map: No
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: Yes
      Amap: Yes
      No
      width
      Line width
      number
      No
      
      Yes
      Yes
      Yes
      dottedLine
      Is it a dashed line?
      boolean
      No
      Defaults to "false"
      Yes
      Yes
      Yes
      arrowLine
      Line with an arrow
      boolean
      No
      -
      No
      Yes
      No
      arrowIconPath
      Replace the arrow icon
      string
      No
      -
      No
      Yes
      No
      borderColor
      Line border color
      string
      No
      -
      No
      Google Map: No
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      Yes
      borderWidth
      Line thickness
      number
      No
      -
      No
      Google Map: No
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      Yes
      level
      Overlay relationship
      string
      No
      Defaults to "abovelabels"
      No
      Google Map: No
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      No
      textStyle
      Font Style
      TextStyle
      No
      Text style on the polyline
      No
      Google Map: No
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      No
      segmentTexts
      Segmented text
      Array<SegmentText>
      No
      Content and position of text on the polyline
      No
      Google Map: No
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      No

      SegmentText

      Attribute
      Description
      Type
      name
      Name
      string
      startIndex
      Starting Point
      number
      endIndex
      End point
      number

      TextStyle

      Attribute
      Description
      Type
      Default value
      textColor
      Text Color
      string
      #000000
      strokeColor
      Outline color
      number
      #ffffff
      fontSize
      Font Size
      number
      14
      The level field represents the overlay relationship with other map elements, with the following optional values:
      Value
      Description
      abovelabels
      Displayed above all POIs
      abovebuildings
      Displayed above building blocks and below POIs
      aboveroads
      Displayed above the road and below the building blocks

      polygon

      Feature Description: Specifies a series of coordinate points, generating a closed polygon based on points coordinate data.
      Attribute
      Description
      Type
      Required
      Remarks
      Supported on iOS
      Supported on Android
      Supported on IDE
      dashArray
      Dotted boundary line
      Array<number>
      No
      The default value [0, 0] represents a solid line, [10, 10] signifies a dashed line composed of ten pixels of solid line and ten pixels of blank space (repeated in this manner).
      No
      Google Map: No
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      No
      points
      Array of latitude and longitude coordinates
      array
      Yes
      [{latitude: 0, longitude: 0}]
      Yes
      Yes
      Yes
      strokeWidth
      Outline width
      number
      No
      -
      Yes
      Yes
      No
      strokeColor
      Outline color
      string
      No
      Hexadecimal
      Yes
      Yes
      No
      fillColor
      Filling Color
      string
      No
      Hexadecimal
      Yes
      Yes
      Yes
      zIndex
      Set the Z-axis value for the polygon.
      number
      No
      -
      No
      Yes
      Yes
      level
      Overlay relationship
      string
      No
      Defaults to "abovelabels"
      No
      Google Map: No
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      No

      circle

      Feature Description: Displays images on the map.
      Attribute
      Description
      Type
      Required
      Remarks
      iOS Compatibility
      Android Compatibility
      IDE Compatibility
      latitude
      Latitude
      number
      Yes
      Number of floating points, ranging from -90 to 90.
      Yes
      Yes
      Yes
      longitude
      Longitude
      number
      Yes
      Number of floating points, ranging from -180 to 180.
      Yes
      Yes
      Yes
      color
      Outline color
      string
      No
      Number of floating points, ranging from -180 to 180.
      Yes
      Yes
      Yes
      fillColor
      Filling Color
      string
      No
      Hexadecimal
      Yes
      Yes
      Yes
      radius
      Radius
      number
      Yes
      -
      Yes
      Yes
      Yes
      strokeWidth
      Outline width
      number
      No
      -
      Yes
      Yes
      No
      level
      Overlay relationship
      string
      No
      Defaults to "abovelabels"
      No
      Google Map: No
      Huawei Map: No
      Tencent Map: Yes
      Baidu Map: No
      Amap: No
      No

      control

      Feature Description: Displays controls on the map, the controls not moving with the map. This feature is soon to be deprecated, and the use of cover-view is recommended.
      Attribute
      Description
      Type
      Required
      Remarks
      iOS Compatibility
      Android Compatibility
      IDE Compatibility
      id
      Control id
      number
      No
      This id will be returned in the callback of the control click event.
      No
      No
      No
      position
      Spatial position on the map
      object
      Yes
      Spatial position relative to the map
      No
      No
      No
      iconPath
      Displayed Icon
      string
      Yes
      Image path in the project directory, supporting local path and code package path.
      No
      No
      No
      clickable
      Whether it can be clicked
      boolean
      No
      By default, it cannot be clicked.
      No
      No
      No

      position

      Attribute
      Description
      Type
      Required
      Remarks
      iOS Compatibility
      Android Compatibility
      IDE Compatibility
      left
      Distance to the left boundary of the map
      number
      No
      Defaults to 0.
      No
      No
      No
      top
      Distance to the top boundary of the map
      number
      No
      Defaults to 0.
      No
      No
      No
      width
      Spatial width
      number
      No
      Defaults to the image width.
      No
      No
      No
      height
      Spatial height
      number
      No
      Defaults to the image height.
      No
      No
      No

      Return value of "bindregionchange"

      Attribute
      Description
      Type
      Remarks
      type
      Triggered at the onset and conclusion of the changes to the field.
      string
      The onset of the change to the field of view is denoted as 'begin', and its conclusion as 'end'.
      causedBy
      The cause leading to the change to the field of view.
      string
      Induced by dragging the map (drag), scaling (scale), or invoking the interface (update).

      Scale bar

      scale
      3
      4
      5
      6
      7
      8
      9
      10
      11
      Proportion
      1000km
      500km
      200km
      100km
      50km
      50km
      20km
      10km
      5km
      scale
      12
      13
      14
      15
      16
      17
      18
      19
      20
      Proportion
      2km
      1km
      500m
      200m
      100m
      50m
      50m
      20m
      10m
      Note:
      Personalized maps do not currently support debugging within the toolset. Please conduct tests using the client first.
      The color values in the map, such as color/borderColor/bgColor, must be represented in six (or eight) digit hexadecimal format. In the case of eight digits, the last two represent the alpha value, for example: #000000AA.
      The latitude and longitude of the map component are mandatory. If these are not provided, the default values will correspond to the coordinates of Beijing.
      The latitude and longitude used by the map component are based on the Mars coordinate system. When invoking the wx.getLocation interface, it is necessary to specify the type as gcj02.
      Please mind the usage restrictions for the native components.
      If the page containing the current component, or the global configuration, has enabled the enablePassiveEvent option, this built-in component may exhibit unexpected behavior.
      
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy