微信小程序|组件-地图map

Posted 準提童子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序|组件-地图map相关的知识,希望对你有一定的参考价值。

1.效果图

2. wxml代码

<view class="page-body">
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="latitude"
      longitude="longitude"
      markers="markers"
      covers="covers"
      show-location
    ></map>
  </view>

</view>

3. js代码

Page(
  data: 
    latitude: 23.099994,//显示的地图中心经纬度
    longitude: 113.324520,
    markers: [
      id: 1,
      latitude: 23.099994,//标记点的经纬度
      longitude: 113.324520,
      name: 'T.I.T 创地点意园'
    ]
  
  ,
  onReady: function (e) 
    this.mapCtx = wx.createMapContext('myMap')
  
)

 

以上是关于微信小程序|组件-地图map的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序<map>地图组件闪退问题解决

微信小程序map地图的一些使用注意事项

微信小程序开发-地图map组件上使用input组件

微信小程序map组件z-index的层级问题

微信小程序之地图组件

微信小程序 - 多地点标识(map)