微信小程序 map地图(轨迹)

这篇具有很好参考价值的文章主要介绍了微信小程序 map地图(轨迹)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

allMarkers效果图

微信小程序 map地图(轨迹),微信小程序,小程序

 

废话少说直接上马(最后是我遇到的问题)

cover-view是气泡弹窗,可以自定义弹窗,要配合js:customCallout,如果是非自定义的话:callout(可以修改颜色、边框宽度、圆角、边距等)有些属性我没加,还是看官方文档(虽然写的。。)

<!--index.wxml-->
<view class="page-section page-section-gap">
  <map id="myMap" style="width: 100%; height: 450px;" latitude="{{latitude}}" longitude="{{longitude}}" bindmarkertap="markertap" bindcallouttap="callouttap" bindlabeltap="labeltap" markers="{{markers}}" scale="16" polyline="{{polyline}}">
    <cover-view slot="callout">
      <block wx:for="{{customCalloutMarkerIds}}" wx:key="*this">
        <cover-view class="customCallout" marker-id="{{item}}">
          <!-- <cover-image class="icon" src="../img/point.png"></cover-image> -->
          <cover-view class="content">
            <view style="background-color: #fff;">
              <view>设备名称</view>
              <view>设备名称</view>
              <view>设备名称</view>
            </view>
          </cover-view>
        </cover-view>
      </block>
    </cover-view>
  </map>
  <button bindtap="addMarker" class="page-body-button" type="primary">添加marker</button>
</view>

字段说明:

allMarkers:模拟位置点

markers:地图显示位置点

polyline:地图点连线位置点

mapCtx:初始化地图

 customCallout:气泡自定义使用(建议使用方法)

callout:气泡简易使用

const normalCallout = {
  id: 1,
  latitude: 23.098994,
  longitude: 113.322520,
  iconPath: '../img/point.png',
  callout: {
    content: '文本内容',
    color: '#ff0000',
    fontSize: 14,
    borderWidth: 2,
    borderRadius: 10,
    borderColor: '#000000',
    bgColor: '#fff',
    padding: 5,
    display: 'ALWAYS',
    textAlign: 'center'
  },
}

const customCallout1 = {
  id: 2,
  latitude: 23.097994,
  longitude: 113.323520,
  iconPath: '../img/point.png',
  callout: {
    content: '文本内容',
    color: '#ff0000',
    fontSize: 14,
    borderWidth: 2,
    borderRadius: 10,
    borderColor: '#000000',
    bgColor: '#fff',
    padding: 5,
    display: 'ALWAYS',
    textAlign: 'center'
  },
}

const customCallout2 = {
  id: 3,
  latitude: 23.096994,
  longitude: 113.324520,
  iconPath: '../img/point.png',
  customCallout: {
    anchorY: 10,
    anchorX: 0,
    display: 'ALWAYS',
  },
}

const customCallout3 = {
  id: 4,
  latitude: 23.095994,
  longitude: 113.325520,
  iconPath: '../img/point.png',
  customCallout: {
    anchorY: 0,
    anchorX: 20,
    display: 'ALWAYS',
  },
}

const allMarkers = [normalCallout, customCallout1, customCallout2, customCallout3]

Component({
  data: {
    mapCtx: '',
    latitude: 23.098994,
    longitude: 113.322520,
    customCalloutMarkerIds: '',
    markers: [],
    polyline: []
  },
  onReady: function (e) {
    // 使用 wx.createMapContext 获取 map 上下文
    this.mapCtx = wx.createMapContext('myMap')

  },
  methods: {
    addMarker() {
      var list = []
      var that = this
      for (const i in allMarkers) {
        var point = {
          latitude: allMarkers[i].latitude,
          longitude: allMarkers[i].longitude
        }
        list.push(point)
      }
      console.log(this.data.polyline.points)
      this.setData({
        polyline:[{
          points: list,
          color: '#58c16c',
          width: 6,
          borderColor: '#2f693c',
          borderWidth: 1,
          arrowLine: true
        }],
        markers: allMarkers,
        customCalloutMarkerIds: [2, 3, 4],
      })
    },

  },
})

xml和js直接复制就可以运行了没有其他配置

所遇到问题:

1.初始化时我在data直接给markers和polyline赋值了,导致不能显示气泡,解决是加了一个按钮等map初始化结束在添加点就正常了

2.marker-id必须是number

3.我没写,但是我感觉自定义气泡是可以加点击事件的文章来源地址https://www.toymoban.com/news/detail-637756.html

到了这里,关于微信小程序 map地图(轨迹)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包