微信小程序开发之地图功能实战教程

发布时间：2023-08-17 05:41:24 作者：yuko521 阅读量：6504

微信小程序之地图功能（map）实战教程。本文主要介绍微信小程序中的地图模块相关功能。

86f21dd66805f4629040dfbac6ad6a35.png (162.58 KB, 下载次数: 14)

下载附件

微信小程序开发之地图功能实战教程

1 小时前上传

基本使用

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

.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
    }],
    ... //省略代码
    }