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

2017-12-22

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

微信小程序map

地圖。

屬性名	類型	默認值	說明	最低版本
longitude	Number		中心經(jīng)度
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		點擊標記點時觸發(fā)
bindcallouttap	EventHandle		點擊標記點對應(yīng)的氣泡時觸發(fā)	1.2.0
bindcontroltap	EventHandle		點擊控件時觸發(fā)
bindregionchange	EventHandle		視野發(fā)生變化時觸發(fā)
bindtap	EventHandle		點擊地圖時觸發(fā)

注意: covers 屬性即將移除，請使用 markers 替代

markers

標記點用于在地圖上顯示標記的位置

屬性	說明	類型	必填	備注	最低版本
id	標記點id	Number	否	marker點擊事件回調(diào)會返回此id
latitude	緯度	Number	是	浮點數(shù)，范圍 -90 ~ 90
longitude	經(jīng)度	Number	是	浮點數(shù)，范圍 -180 ~ 180
title	標注點名	String	否
iconPath	顯示的圖標	String	是	項目目錄下的圖片路徑，支持相對路徑寫法，以'/'開頭則表示相對小程序根目錄；也支持臨時路徑
rotate	旋轉(zhuǎn)角度	Number	否	順時針旋轉(zhuǎn)的角度，范圍 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對應(yīng)的經(jīng)緯度	1.2.0
anchor	經(jīng)緯度在標注圖標的錨點，默認底邊中點	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

指定一系列坐標點，從數(shù)組第一項連線至最后一項

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

circles

在地圖上顯示圓

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

controls

在地圖上顯示控件，控件不隨著地圖移動

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

position

屬性	說明	類型	必填	備注
left	距離地圖的左邊界多遠	Number	否	默認為0
top	距離地圖的上邊界多遠	Number	否	默認為0
width	控件寬度	Number	否	默認為圖片寬度
height	控件高度	Number	否	默認為圖片高度

地圖組件的經(jīng)緯度必填, 如果不填經(jīng)緯度則默認值是北京的經(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組件是由客戶端創(chuàng)建的原生組件，它的層級是最高的。
tip: 請勿在scroll-view中使用map組件。
tip:css動畫對map組件無效。
tip:map組件使用的經(jīng)緯度是火星坐標系，調(diào)用wx.getLocation接口需要指定type為gcj02

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

第二部分：如何開通一個小商店