快捷導(dǎo)航

微信小程序地圖map詳解及簡(jiǎn)單實(shí)例

更新時(shí)間：2017年01月10日 10:52:29 投稿：lqh

這篇文章主要介紹了微信小程序地圖map詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下

微信小程序地圖map

微信小程序map

地圖

屬性名	類(lèi)型	默認(rèn)值	說(shuō)明
longitude	Number		中心經(jīng)度
latitude	Number		中心緯度
scale	Number	1	縮放級(jí)別
markers	Array		標(biāo)記點(diǎn)
covers	Array		覆蓋物

標(biāo)記點(diǎn)

標(biāo)記點(diǎn)用于在地圖上顯示標(biāo)記的位置，不能自定義圖標(biāo)和樣式

屬性	說(shuō)明	類(lèi)型	必填	備注
latitude	緯度	Number	是	浮點(diǎn)數(shù)，范圍 -90 ~ 90
longitude	經(jīng)度	Number	是	浮點(diǎn)數(shù)，范圍 -180 ~ 180
name	標(biāo)注點(diǎn)名	String	是
desc	標(biāo)注點(diǎn)詳細(xì)描述	String	否

覆蓋物

覆蓋物用于在地圖上顯示自定義圖標(biāo)，可自定義圖標(biāo)和樣式

屬性	說(shuō)明	類(lèi)型	必填	備注
latitude	緯度	Number	是	浮點(diǎn)數(shù)，范圍 -90 ~ 90
longitude	經(jīng)度	Number	是	浮點(diǎn)數(shù)，范圍 -180 ~ 180
iconPath	顯示的圖標(biāo)	String	是	項(xiàng)目目錄下的圖片路徑，支持相對(duì)路徑寫(xiě)法
rotate	旋轉(zhuǎn)角度	Number	否	順時(shí)針旋轉(zhuǎn)的角度，范圍 0 ~ 360，默認(rèn)為 0

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

標(biāo)記點(diǎn)markers只能在初始化的時(shí)候設(shè)置，不支持動(dòng)態(tài)更新。

示例：

<!-- map.wxml -->
<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}"
 style="width: 375px; height: 200px;">
</map>

// map.js
Page({
 data: {
  markers: [{
   latitude: 23.099994,
   longitude: 113.324520,
   name: 'T.I.T 創(chuàng)意園',
   desc: '我現(xiàn)在的位置'
  }],
  covers: [{
   latitude: 23.099794,
   longitude: 113.324520,
   icaonPath: '../images/car.png',
   rotate: 10
  }, {
   latitude: 23.099298,
   longitude: 113.324129,
   iconPath: '../images/car.png',
   rotate: 90
  }]
 }
})

Bug & Tip

tip: 請(qǐng)勿在 scroll-view 中使用 map 組件

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

JS屬性scrollTop?clientHeight?scrollHeight理解學(xué)習(xí)
這篇文章主要為大家介紹了JS屬性scrollTop?clientHeight?scrollHeight理解學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
詳解微信小程序Radio選中樣式切換
這篇文章主要介紹了詳解微信小程序Radio選中樣式切換的相關(guān)資料,需要的朋友可以參考下
2017-07-07
ECharts Canvas渲染在SVG合理運(yùn)用
這篇文章主要為大家介紹了ECharts Canvas渲染在SVG合理運(yùn)用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
可拖動(dòng)窗口，附帶鼠標(biāo)控制漸變透明，開(kāi)啟關(guān)閉功能
可拖動(dòng)窗口，附帶鼠標(biāo)控制漸變透明，開(kāi)啟關(guān)閉功能...
2006-06-06
JS前端性能指標(biāo)定位FMP使用詳解
這篇文章主要為大家介紹了JS前端性能指標(biāo)定位FMP使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
關(guān)于JavaScript輪播圖的實(shí)現(xiàn)
這篇文章主要介紹了關(guān)于JavaScript輪播圖的實(shí)現(xiàn),下面文章主要是利用利用html 和 css 代碼實(shí)現(xiàn)輪播圖，詳細(xì)內(nèi)容請(qǐng)參考下面詳細(xì)內(nèi)容，希望對(duì)你有所幫助
2021-11-11
uniapp自定義相機(jī)實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了uniapp自定義相機(jī)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解
這篇文章主要為大家介紹了Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
可視化埋點(diǎn)元素圈選器實(shí)現(xiàn)源碼
這篇文章主要為大家介紹了可視化埋點(diǎn)元素圈選器實(shí)現(xiàn)源碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
前端必會(huì)的package.json創(chuàng)建及常見(jiàn)屬性用法示例詳解
這篇文章主要為大家介紹了前端必會(huì)的package.json創(chuàng)建及常見(jiàn)屬性用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08