微信小程序中的地图的使用

微信小程序中的地图组件 是一个用于展示地图的组件,提供了丰富的功能和配置选项,可以实现定位、标记、路线规划等多种地图相关的交互。下面是对这个组件的详细介绍,包括属性、事件以及示例代码。

  1. 组件属性
    基础属性
    longitude: 地图中心的经度。
    latitude: 地图中心的纬度。
    scale: 缩放级别,取值范围为 5-18。
    min-scale: 最小缩放级别。
    max-scale: 最大缩放级别。
    markers: 标记点数组,标记点的格式如下:
html 复制代码
{
  "id": 0,
  "latitude": 23.10229,
  "longitude": 113.3345211,
  "title": "Marker Title",
  "iconPath": "/resources/marker.png",
  "width": 50,
  "height": 50
}

polyline: 路线数组,每一项是一个对象,如下:

html 复制代码
{
  "points": [
    {"latitude": 23.10229, "longitude": 113.3345211},
    {"latitude": 23.00229, "longitude": 113.3345211}
  ],
  "color": "#FF0000DD",
  "width": 2,
  "dottedLine": false
}

circles: 圆数组,每一项是一个对象,如下:

html 复制代码
{
  "latitude": 23.10229,
  "longitude": 113.3345211,
  "color": "#FF0000DD",
  "fillColor": "#000000DD",
  "radius": 100,
  "strokeWidth": 2
}

其他属性

include-points: 视野内显示的所有点的坐标数组,会自动缩放地图以包含所有该数组内的点。

show-location: 是否显示带有方向的当前定位点。

layer-style: 个性化地图层的样式 id(目前只支持 2D 地图)。

subkey: 个性化地图使用的 key。

rotate: 旋转角度,范围 0 ~ 360。

skew: 倾斜角度,范围 0 ~ 40。

enable-3D: 是否开启 3D 地图。

show-compass: 是否显示指南针。

enable-overlooking: 是否开启俯视。

enable-zoom: 是否支持缩放。

enable-scroll: 是否支持拖动。

enable-rotate: 是否支持旋转。

  1. 组件事件
    bindtap: 点击地图时触发。
    bindmarkertap: 点击标记点时触发。
    bindcontroltap: 点击控件时触发。
    bindcallouttap: 点击标记点对应的气泡时触发。
    bindregionchange: 视野发生变化时触发。
    bindpoitap: 点击地图 poi 点时触发。
  2. 示例代码
    以下是一个简单的微信小程序地图组件示例,展示了基本的地图功能,包括显示中心点、标记点和响应事件。

WXML 部分

html 复制代码
<view class="container">
  <map 
    id="myMap"
    longitude="113.324520"
    latitude="23.099994"
    scale="14"
    markers="{{markers}}"
    bindmarkertap="onMarkerTap"
    bindregionchange="onRegionChange"
    style="width: 100%; height: 300px;">
  </map>
</view>

JS 部分

javascript 复制代码
Page({
  data: {
    markers: [{
      iconPath: "/resources/marker.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }]
  },
  onMarkerTap: function (e) {
    console.log('Marker tap', e)
  },
  onRegionChange: function (e) {
    console.log('Region change', e)
  }
})
相关推荐
2501_9151063210 分钟前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_9160074710 分钟前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
阿登林27 分钟前
如何利用扣子生成小程序并进行发布指南
小程序·扣子
全职计算机毕业设计1 小时前
基于微信小程序的运动康复中心预约系统的设计与实现(SpringBoot+Vue+Uniapp)
vue.js·spring boot·微信小程序
流***陌10 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
Tencent_TCB10 小时前
云开发CloudBase AI+实战:快速搭建AI小程序全流程指南
人工智能·ai·小程序·ai编程·云开发
说私域13 小时前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_9160074716 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
一匹电信狗18 小时前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
2501_915921431 天前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone