缩放视野展示所有经纬度--初始化展示所有经纬度 --小程序腾讯地图位置服务示例代码参考

最新推荐文章于 2024-09-06 08:23:33 发布

克里斯蒂亚诺更新

最新推荐文章于 2024-09-06 08:23:33 发布

阅读量180

点赞数 1

分类专栏：小程序文章标签：小程序 apache

本文链接：https://blog.csdn.net/weixin_36152801/article/details/140270235

版权

小程序专栏收录该内容

22 篇文章 0 订阅

订阅专栏

效果：

index.wxml:

<view class="map-view-container">
  <view class="map-view-content">

    <view class="map-container plr20">
      <map class="map" id="map" latitude="{{location.latitude}}" longitude="{{location.longitude}}" scale="{{scale}}" markers="{{markers}}">
      </map>
    </view>
  </view>

</view>

index.wxss:


.map-view-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  background: #F8F8F7;
  width: 100%;
}
.map-view-content {
  width: 100%;
  background: #FFF;
  padding:20px 0 20px;
  margin-top: 10px; 
}
.map {
  width:100%;
  height:400px;
  position: relative;
}

index.js:


Page({

  /**
   * 页面的初始数据
   */
  data: {
    scale: 10.5,
    location: {
      latitude: 39.991104,
      longitude: 116.377503,
    },
    markers: [{
      id: 1,
      latitude: 39.953416,
      longitude: 116.480945,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '../../map/marker/imgs/Marker1_Activated@3x.png'
    },{
      id: 2,
      latitude: 39.984104,
      longitude: 116.407503,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '../../map/marker/imgs/Marker1_Activated@3x.png'
    },{
      id: 3,
      latitude: 39.908802,
      longitude: 116.497502,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '../../map/marker/imgs/Marker1_Activated@3x.png'
    },{
      id: 4,
      latitude: 40.040417,
      longitude: 116.373514,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '../../map/marker/imgs/Marker1_Activated@3x.png'
    },{
      id: 5,
      latitude: 39.953416,
      longitude: 116.380945,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '../../map/marker/imgs/Marker1_Activated@3x.png'
    },{
      id: 6,
      latitude: 39.984104,
      longitude: 116.307503,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '../../map/marker/imgs/Marker1_Activated@3x.png'
    },{
      id: 7,
      latitude: 39.908802,
      longitude: 116.397502,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '../../map/marker/imgs/Marker1_Activated@3x.png'
    },{
      id: 8,
      latitude: 40.040417,
      longitude: 116.273514,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '../../map/marker/imgs/Marker1_Activated@3x.png'
    }],
    isDisabled: false,
    dialogShow: false,
		link: 'https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html'
  },

  onShow() {
    
    const mapCtx = wx.createMapContext('map', this);
    mapCtx.initMarkerCluster({
      gridSize:30
    });
  },
})