欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序地圖標(biāo)記多個(gè)位置的方法詳解

 更新時(shí)間：2022年04月21日 11:45:39   作者：算法與編程之美  
地圖是我們平時(shí)經(jīng)常用到的組件,而且地圖是顯示在最高層的原生組件,下面這篇文章主要給大家介紹了關(guān)于微信小程序地圖標(biāo)記多個(gè)位置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1 問題

如何在微信小程序?qū)崿F(xiàn)標(biāo)記多個(gè)位置。

2 方法

1.在pages文件夾下新建image文件夾用來存放標(biāo)記的圖片。

2.在map標(biāo)簽中添加markers屬性。

 <map
 id="map"
 style="width: 100%; height:100%;"
 scale="17"
 markers="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{markers}}"
 longitude="116.336590"
 latitude="39.941127"
 show-location>
 </map>

3.在.js文件中中添加markers屬性。

   markers: [
   //貘科動(dòng)物館
   {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
     id: 0,
     iconPath: "../image/動(dòng)物園.png",
     latitude: 39.941386,
     longitude: 116.336655,
     width: 30,  //圖片顯示寬度
     height: 30,//圖片顯示高度
     title:'貘科動(dòng)物館',
   },
   //犀鳥館
   {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
     id: 1,
     iconPath: "../image/動(dòng)物園.png",
     latitude: 39.940826,
     longitude: 116.335109,
     width: 30,  
     height: 30,
     title:'犀鳥館'
   },
   //火烈鳥館
   {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
     id: 2,
     iconPath: "../image/動(dòng)物園.png",
     latitude: 39.940578,
     longitude: 116.335977,
     width: 30,
     height: 30,
     title: '火烈鳥館'
   },
   //鸚鵡館
   {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
     id: 3,
     iconPath: "../image/動(dòng)物園.png",
     latitude: 39.941573,
     longitude: 116.335544,
     width: 30,
     height: 30,
     title: '鸚鵡館'
   }]

4.注意：

①iconpath屬性的路徑要與標(biāo)記圖片保存的路徑一致；

②markers屬性的代碼要放在data{}里面，否則不會(huì)顯示標(biāo)記點(diǎn)；

③標(biāo)記點(diǎn)的坐標(biāo)可以在騰訊地圖坐標(biāo)拾取器（https://lbs.qq.com/getPoint/）中查詢。

6b472e5dea11a55e4c44601096f6c157.png

5.完成以上操作后效果如圖：

c2c82ae884e55faf1b280bf05dd68f81.png

本次標(biāo)記點(diǎn)用到的圖標(biāo)是：

3 結(jié)語

本次介紹了如何在微信小程序的地圖上插入標(biāo)記點(diǎn)，下期將介紹小程序地圖不同標(biāo)記點(diǎn)的跳轉(zhuǎn)。

到此這篇關(guān)于微信小程序地圖標(biāo)記多個(gè)位置的文章就介紹到這了,更多相關(guān)小程序地圖標(biāo)記位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論