微信小程序地图map,控制小程序地图控件

—— 2017 ——

12/22

00:00

来源：

作者：未知

栏目：小程序开发

2017/12/22 0:00:00 来源：不详作者：未知

微信小程序map

地图。

属性名	类型	默认值	说明	最低版本
longitude	Number		中心经度
latitude	Number		中心纬度
scale	Number	16	缩放级别，取值范围为5-18
markers	Array		标记点
covers	Array		即将移除，请使用 markers
polyline	Array		路线
circles	Array		圆
controls	Array		控件
include-points	Array		缩放视野以包含所有给定的坐标点
show-location	Boolean		显示带有方向的当前定位点
bindmarkertap	EventHandle		点击标记点时触发
bindcallouttap	EventHandle		点击标记点对应的气泡时触发	1.2.0
bindcontroltap	EventHandle		点击控件时触发
bindregionchange	EventHandle		视野发生变化时触发
bindtap	EventHandle		点击地图时触发

注意: covers 属性即将移除，请使用 markers 替代

markers

标记点用于在地图上显示标记的位置

属性	说明	类型	必填	备注	最低版本
id	标记点id	Number	否	marker点击事件回调会返回此id
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
title	标注点名	String	否
iconPath	显示的图标	String	是	项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径
rotate	旋转角度	Number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha	标注的透明度	Number	否	默认1，无透明
width	标注图标宽度	Number	否	默认为图片实际宽度
height	标注图标高度	Number	否	默认为图片实际高度
callout	自定义标记点上方的气泡窗口	Object	否	{content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display}	1.2.0
label	为标记点旁边增加标签	Object	否	{color, fontSize, content, x, y}，可识别换行符，x,y原点是marker对应的经纬度	1.2.0
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点	1.2.0

marker 上的气泡 callout

属性	说明	类型
content	文本	String
color	文本颜色	String
fontSize	文字大小	Number
borderRadius	callout边框圆角	Number
bgColor	背景色	String
padding	文本边缘留白	Number
display	'BYCLICK':点击显示; 'ALWAYS':常显	String

polyline

指定一系列坐标点，从数组第一项连线至最后一项

属性	说明	类型	必填	备注	最低版本
points	经纬度数组	Array	是	[{latitude: 0, longitude: 0}]
color	线的颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#000000AA
width	线的宽度	Number	否
dottedLine	是否虚线	Boolean	否	默认false
arrowLine	带箭头的线	Boolean	否	默认false，开发者工具暂不支持该属性	1.2.0
borderColor	线的边框颜色	String	否		1.2.0
borderWidth	线的厚度	Number	否		1.2.0

circles

在地图上显示圆

属性	说明	类型	必填	备注
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
color	描边的颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#000000AA
fillColor	填充颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#000000AA
radius	半径	Number	是
strokeWidth	描边的宽度	Number	否

controls

在地图上显示控件，控件不随着地图移动

属性	说明	类型	必填	备注
id	控件id	Number	否	在控件点击事件回调会返回此id
position	控件在地图的位置	Object	是	控件相对地图位置
iconPath	显示的图标	String	是	项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径
clickable	是否可点击	Boolean	否	默认不可点击

position

属性	说明	类型	必填	备注
left	距离地图的左边界多远	Number	否	默认为0
top	距离地图的上边界多远	Number	否	默认为0
width	控件宽度	Number	否	默认为图片宽度
height	控件高度	Number	否	默认为图片高度

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。

示例：

<!-- map.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

// map.js
Page({
  data: {
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})

Bug & Tip

tip:map组件是由客户端创建的原生组件，它的层级是最高的。
tip: 请勿在scroll-view中使用map组件。
tip:css动画对map组件无效。
tip:map组件使用的经纬度是火星坐标系，调用wx.getLocation接口需要指定type为gcj02

更多微信小程序开发教程，可以关注。

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序开发微信小程序

上/下篇

微信小程序媒体组件video视频,微信小程序视频组件库

video 视频。属性名类型默认值说明最低版本 src String 要播放视频的资源地址 duration Number 指定视频时长 1.1.0 controls Boolean tru

微信小程序开发微信小程序SaaS 2017/12/22 0:00:00
微信小程序画布canvas,微信小程序画布属性实例

canvas 画布。属性名类型默认值说明 canvas-id String canvas 组件的唯一标识符 disable-scroll Boolean false 当在 canvas 中移动

微信小程序开发微信小程序 2017/12/22 0:00:00