微信小程序开发如何实现地图功能

这篇文章主要讲解了“微信小程序开发如何实现地图功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序开发如何实现地图功能”吧！

基本使用

地图组件使用起来也很简单。

.wxml

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location >
</map>

除了显示基本地图，还可以在地图上添加markers–标注，polyline–折线，circles–圆形，controls–控件。

markers

data: {
    //
    markers: [{
      iconPath: "../../img/marker_red.png",
      id: 0,
      latitude: 40.002607,
      longitude: 116.487847,
      width: 35,
      height: 45
    }],
    ... //省略代码
    }

在data中定义markers变量来表示覆盖物

然后map控件引入即可：

<map id="map" longitude="{{longitude}}"  markers="{{markers}}"  ...//省略代码>
</map>

polyline

data: {
    //
    polyline: [{
      points: [{
        longitude: '116.481451',
        latitude: '40.006822'
      }, {
        longitude: '116.487847',
        latitude: '40.002607'
      }, {
        longitude: '116.496507',
        latitude: '40.006103'
      }],
      color: "#FF0000DD",
      width: 3,
      dottedLine: true
    }],
    ... //省略代码
    }
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" >

circles

data: {
    //
    circles: [{
      latitude: '40.007153',
      longitude: '116.491081',
      color: '#FF0000DD',
      fillColor: '#7cb5ec88',
      radius: 400,
      strokeWidth: 2
    }],
    ... //省略代码
    }

感谢各位的阅读，以上就是“微信小程序开发如何实现地图功能”的内容了，经过本文的学习后，相信大家对微信小程序开发如何实现地图功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！