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

2017-12-22

導(dǎo)讀：微信小程序map 地圖。屬性名類(lèi)型默認(rèn)值說(shuō)明最低版本 longitude Number 中心經(jīng)度 latitude Number 中心緯度 scale Number 16 縮放級(jí)別，取值范圍為5-18 markers Array 標(biāo)記點(diǎn) covers Array 即將移除，請(qǐng)使...

微信小程序map

地圖。

屬性名	類(lèi)型	默認(rèn)值	說(shuō)明	最低版本
longitude	Number		中心經(jīng)度
latitude	Number		中心緯度
scale	Number	16	縮放級(jí)別，取值范圍為5-18
markers	Array		標(biāo)記點(diǎn)
covers	Array		即將移除，請(qǐng)使用 markers
polyline	Array		路線
circles	Array		圓
controls	Array		控件
include-points	Array		縮放視野以包含所有給定的坐標(biāo)點(diǎn)
show-location	Boolean		顯示帶有方向的當(dāng)前定位點(diǎn)
bindmarkertap	EventHandle		點(diǎn)擊標(biāo)記點(diǎn)時(shí)觸發(fā)
bindcallouttap	EventHandle		點(diǎn)擊標(biāo)記點(diǎn)對(duì)應(yīng)的氣泡時(shí)觸發(fā)	1.2.0
bindcontroltap	EventHandle		點(diǎn)擊控件時(shí)觸發(fā)
bindregionchange	EventHandle		視野發(fā)生變化時(shí)觸發(fā)
bindtap	EventHandle		點(diǎn)擊地圖時(shí)觸發(fā)

注意: covers 屬性即將移除，請(qǐng)使用 markers 替代

markers

標(biāo)記點(diǎn)用于在地圖上顯示標(biāo)記的位置

屬性	說(shuō)明	類(lèi)型	必填	備注	最低版本
id	標(biāo)記點(diǎn)id	Number	否	marker點(diǎn)擊事件回調(diào)會(huì)返回此id
latitude	緯度	Number	是	浮點(diǎn)數(shù)，范圍 -90 ~ 90
longitude	經(jīng)度	Number	是	浮點(diǎn)數(shù)，范圍 -180 ~ 180
title	標(biāo)注點(diǎn)名	String	否
iconPath	顯示的圖標(biāo)	String	是	項(xiàng)目目錄下的圖片路徑，支持相對(duì)路徑寫(xiě)法，以'/'開(kāi)頭則表示相對(duì)小程序根目錄；也支持臨時(shí)路徑
rotate	旋轉(zhuǎn)角度	Number	否	順時(shí)針旋轉(zhuǎn)的角度，范圍 0 ~ 360，默認(rèn)為 0
alpha	標(biāo)注的透明度	Number	否	默認(rèn)1，無(wú)透明
width	標(biāo)注圖標(biāo)寬度	Number	否	默認(rèn)為圖片實(shí)際寬度
height	標(biāo)注圖標(biāo)高度	Number	否	默認(rèn)為圖片實(shí)際高度
callout	自定義標(biāo)記點(diǎn)上方的氣泡窗口	Object	否	{content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display}	1.2.0
label	為標(biāo)記點(diǎn)旁邊增加標(biāo)簽	Object	否	{color, fontSize, content, x, y}，可識(shí)別換行符，x,y原點(diǎn)是marker對(duì)應(yīng)的經(jīng)緯度	1.2.0
anchor	經(jīng)緯度在標(biāo)注圖標(biāo)的錨點(diǎn)，默認(rèn)底邊中點(diǎn)	Object	否	{x, y}，x表示橫向(0-1)，y表示豎向(0-1)。{x: .5, y: 1} 表示底邊中點(diǎn)	1.2.0

marker 上的氣泡 callout

屬性	說(shuō)明	類(lèi)型
content	文本	String
color	文本顏色	String
fontSize	文字大小	Number
borderRadius	callout邊框圓角	Number
bgColor	背景色	String
padding	文本邊緣留白	Number
display	'BYCLICK':點(diǎn)擊顯示; 'ALWAYS':常顯	String

polyline

指定一系列坐標(biāo)點(diǎn)，從數(shù)組第一項(xiàng)連線至最后一項(xiàng)

屬性	說(shuō)明	類(lèi)型	必填	備注	最低版本
points	經(jīng)緯度數(shù)組	Array	是	[{latitude: 0, longitude: 0}]
color	線的顏色	String	否	8位十六進(jìn)制表示，后兩位表示alpha值，如：#000000AA
width	線的寬度	Number	否
dottedLine	是否虛線	Boolean	否	默認(rèn)false
arrowLine	帶箭頭的線	Boolean	否	默認(rèn)false，開(kāi)發(fā)者工具暫不支持該屬性	1.2.0
borderColor	線的邊框顏色	String	否		1.2.0
borderWidth	線的厚度	Number	否		1.2.0

circles

在地圖上顯示圓

屬性	說(shuō)明	類(lèi)型	必填	備注
latitude	緯度	Number	是	浮點(diǎn)數(shù)，范圍 -90 ~ 90
longitude	經(jīng)度	Number	是	浮點(diǎn)數(shù)，范圍 -180 ~ 180
color	描邊的顏色	String	否	8位十六進(jìn)制表示，后兩位表示alpha值，如：#000000AA
fillColor	填充顏色	String	否	8位十六進(jìn)制表示，后兩位表示alpha值，如：#000000AA
radius	半徑	Number	是
strokeWidth	描邊的寬度	Number	否

controls

在地圖上顯示控件，控件不隨著地圖移動(dòng)

屬性	說(shuō)明	類(lèi)型	必填	備注
id	控件id	Number	否	在控件點(diǎn)擊事件回調(diào)會(huì)返回此id
position	控件在地圖的位置	Object	是	控件相對(duì)地圖位置
iconPath	顯示的圖標(biāo)	String	是	項(xiàng)目目錄下的圖片路徑，支持相對(duì)路徑寫(xiě)法，以'/'開(kāi)頭則表示相對(duì)小程序根目錄；也支持臨時(shí)路徑
clickable	是否可點(diǎn)擊	Boolean	否	默認(rèn)不可點(diǎn)擊

position

屬性	說(shuō)明	類(lèi)型	必填	備注
left	距離地圖的左邊界多遠(yuǎn)	Number	否	默認(rèn)為0
top	距離地圖的上邊界多遠(yuǎn)	Number	否	默認(rèn)為0
width	控件寬度	Number	否	默認(rèn)為圖片寬度
height	控件高度	Number	否	默認(rèn)為圖片高度

地圖組件的經(jīng)緯度必填, 如果不填經(jīng)緯度則默認(rèn)值是北京的經(jīng)緯度。

示例：

<!-- 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組件是由客戶(hù)端創(chuàng)建的原生組件，它的層級(jí)是最高的。
tip: 請(qǐng)勿在scroll-view中使用map組件。
tip:css動(dòng)畫(huà)對(duì)map組件無(wú)效。
tip:map組件使用的經(jīng)緯度是火星坐標(biāo)系，調(diào)用wx.getLocation接口需要指定type為gcj02

更多微信小程序開(kāi)發(fā)教程，可以關(guān)注hi小程序。

第二部分：如何開(kāi)通一個(gè)小商店