珠海网站建设网珠海网站建设公司 - 品牌建站
只帮客户做赚钱的营销型企业网站,让企业主轻轻松松赚钱!

在中国,有 06815 家企业正在使用我们提供的各项服务!

微信小程序MAP地图插件

发布时间:2018-09-12阅读次数:258来源:珠海网站建设网 [ 网讯互联 ][ 微信小程序 ] [ 我要投稿 ]

微信小程序MAP地图插件是原生组件中的个性化地图【小程序插件定制开发电话:400-000-1280】为丰富小程序地图服务的使用场景,小程序地图组件新增个性化底图样式,小程序开发者可通过开通腾讯位置服务更换小程序地图样式,使用时请注意微信小程序MAP地图插件相关限制,个性化地图能力可在小程序后台“设置-开发者工具-腾讯地图服务”申请开通,设置subkey后,小程序内的地图组件均会使用该底图效果,底图场景的切换会在后续版本提供。

微信小程序MAP地图插件

微信小程序MAP地图插件

微信小程序MAP地图插件


属性名 类型 默认值 说明 最低版本
longitude Number 中心经度
latitude Number 中心纬度
scale Number 16 缩放级别,取值范围为5-18
markers Array 标记点
covers Array 即将移除,请使用 markers
polyline Array 路线
polygons Array 多边形 2.3.0
circles Array
controls Array 控件(即将废弃,建议使用 cover-view 代替)
include-points Array 缩放视野以包含所有给定的坐标点
show-location Boolean 显示带有方向的当前定位点
subkey String '' 个性化地图使用的key,仅初始化地图时有效 2.3.0
enable-3D Boolean false 展示3D楼块(工具暂不支持) 2.3.0
show-compass Boolean false 显示指南针 2.3.0
enable-overlooking Boolean false 开启俯视 2.3.0
enable-zoom Boolean true 是否支持缩放 2.3.0
enable-scroll Boolean true 是否支持拖动 2.3.0
enable-rotate Boolean false 是否支持旋转 2.3.0
bindmarkertap EventHandle 点击标记点时触发,会返回marker的id
bindcallouttap EventHandle 点击标记点对应的气泡时触发,会返回marker的id 1.2.0
bindcontroltap EventHandle 点击控件时触发,会返回control的id
bindregionchange EventHandle 视野发生变化时触发 2.3.0起增加causedBy 参数区分拖动、缩放和调用接口等来源
bindtap EventHandle 点击地图时触发
bindupdated EventHandle 在地图渲染更新完成时触发 1.6.0
bindpoitap EventHandle 点击地图poi点时触发 2.3.0

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

markers

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

属性 说明 类型 必填 备注 最低版本
id 标记点id Number marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
title 标注点名 String
zIndex 显示层级 Number 2.3.0
iconPath 显示的图标 String 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径和网络图片(2.3.0)
rotate 旋转角度 Number 顺时针旋转的角度,范围 0 ~ 360,默认为 0
alpha 标注的透明度 Number 默认1,无透明,范围 0 ~ 1
width 标注图标宽度 Number 默认为图片实际宽度
height 标注图标高度 Number 默认为图片实际高度
callout 自定义标记点上方的气泡窗口 Object 支持的属性见下表,可识别换行符。 1.2.0
label 为标记点旁边增加标签 Object 支持的属性见下表,可识别换行符。 1.2.0
anchor 经纬度在标注图标的锚点,默认底边中点 Object {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 1.2.0
marker 上的气泡 callout
属性 说明 类型 最低版本
content 文本 String 1.2.0
color 文本颜色 String 1.2.0
fontSize 文字大小 Number 1.2.0
borderRadius 边框圆角 Number 1.2.0
borderWidth 边框宽度 Number 2.3.0
borderColor 边框颜色 String 2.3.0
bgColor 背景色,2.3.0开始支持RGBA透明度 String 1.2.0
padding 文本边缘留白 Number 1.2.0
display 'BYCLICK':点击显示; 'ALWAYS':常显 String 1.2.0
textAlign 文本对齐方式。有效值: left, right, center String 1.6.0
marker 上的气泡 label
属性 说明 类型 最低版本
content 文本 String 1.2.0
color 文本颜色 String 1.2.0
fontSize 文字大小 Number 1.2.0
x label的坐标(废弃) Number 1.2.0
y label的坐标(废弃) Number 1.2.0
anchorX label的坐标,原点是 marker 对应的经纬度 Number 2.1.0
anchorY label的坐标,原点是 marker 对应的经纬度 Number 2.1.0
borderWidth 边框宽度 Number 1.6.0
borderColor 边框颜色 String 1.6.0
borderRadius 边框圆角 Number 1.6.0
bgColor 背景色 String 1.6.0
padding 文本边缘留白 Number 1.6.0
textAlign 文本对齐方式。有效值: left, right, center String 1.6.0
polyline

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

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

指定一系列坐标点,根据 points 坐标数据生成闭合多边形,最低版本2.3.0

属性 说明 类型 必填 备注 最低版本
points 经纬度数组 Array [{latitude: 0, longitude: 0}]
strokeWidth 描边的宽度 Number
strokeColor 描边的颜色 String 8位十六进制表示,后两位表示alpha值,如:#000000AA
fillColor 填充颜色 String 8位十六进制表示,后两位表示alpha值,如:#000000AA
zIndex 设置多边形Z轴数值 Number
circles

在地图上显示圆

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

在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view

属性 说明 类型 必填 备注
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)
  }
})

相关api:wx.createMapContext

Bug & Tip
  1. 请注意原生组件使用限制。
  2. tip: map 组件使用的经纬度是火星坐标系,调用 wx.getLocation 接口需要指定 type 为 gcj02


以上内容由珠海网站建设(网讯互联)为您提供!更多有关网站建设网站设计网站制作微信营销微官网手机网站建设营销型网站建设微信小程序等互联网应用服务都可以联系我们!建站热线:400-000-1280

您想咨询企业网站建设流程和报价吗?
您是否有考虑过打造赚钱营销型企业网站
移动互联网+都这么热门了,您还没有4G手机网站吗?
您想要让您的产品和服务出现在搜索引擎首页吗?
您想获得企业网站整体运营推广解决方案吗?
不说了~ 拿起手机扫码沟通,您懂得! ^_^
珠海网站建设公司微信二维码
嘚啵嘚啵一句:加微信时请告知尊姓大名
本文关键词:微信小程序地图插件,小程序地图制作
本文链接:http://www.zhgov.com/webnews/629.html
      珠海网站建设网,微信小程序/企业网站建设综合服务平台
  • 您只需要告诉我们需要什么样的产品,网讯互联团队将为您打造一站式互联网综合应用平台!
立即咨询在线客服

网站建设

为什么要选择网讯互联

工商实名验证
证照齐全 正规公司 诚信经营
公平交易 满意后付款
价格公开透明 倡导理性消费
无风险,免费ICP备案
开具正规发票 免费网站备案
无风险,全额退款
没有有效稿件 承诺全额退款
      网讯互联企业邮箱
  • 请将#换成@
web#zhgov.com
首页 | 关于我们 | 新闻中心 | 支付方式 | 我要加盟 | 我要爆料 | 我要合作 | 我要做网站 | 我要备案 | 网站地图 | 友情链接 | 在线客服 | 联系方式
Copyright © 2007-2018 珠海市网讯互联信息科技有限公司 [ 珠海网站建设网 ] www.zhgov.com , All Rights Reserved. TAGS 新闻地图
【珠海网站建设网】企业网站建设、网站制作、网站设计、营销型网站建设、外贸网站制作、手机网站制作、微信营销、微官网、微信小程序、云主机等服务提供商 ^_^
联系地址:广东省珠海市香洲区香海路129号 咨询电话:133-9295-6503(一按帮您) 传真:0756-3130945 业务邮箱:[ 马上写信咨询 ] 业务QQ:79535318
工商注册号工业和信息化部粤ICP备12038494号粤公网安备 44040202000391号 众信验证 百度信誉V官网认证 安全联盟实名验证