微信小程序的map怎么用

今天小编给大家分享一下微信小程序的map怎么用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

微信小程序map

地图。

注意: covers 属性即将移除，请使用 markers 替代

markers

标记点用于在地图上显示标记的位置

marker 上的气泡 callout

polyline

指定一系列坐标点，从数组第一项连线至最后一项

circles

在地图上显示圆

controls

在地图上显示控件，控件不随着地图移动

position

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。

示例：

<!-- 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>

// map.jsPage({
  data: {
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50}],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229  }, {
        longitude: 113.324520,
        latitude: 23.21229  }],
      color:"#FF0000DD",
      width: 2,
      dottedLine: true}],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50  },
      clickable: true}]
  },
  regionchange(e) {console.log(e.type)
  },
  markertap(e) {console.log(e.markerId)
  },
  controltap(e) {console.log(e.controlId)
  }
})

Bug & Tip

1. tip:map组件是由客户端创建的原生组件，它的层级是最高的。

2. tip: 请勿在scroll-view中使用map组件。

3. tip:css动画对map组件无效。

4. tip:map组件使用的经纬度是火星坐标系，调用wx.getLocation接口需要指定type为gcj02

以上就是“微信小程序的map怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。