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

更新時(shí)間：2022年04月21日 11:45:39 作者：算法與編程之美

地圖是我們平時(shí)經(jīng)常用到的組件,而且地圖是顯示在最高層的原生組件,下面這篇文章主要給大家介紹了關(guān)于微信小程序地圖標(biāo)記多個(gè)位置的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1 問(wèn)題

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

2 方法

1.在pages文件夾下新建image文件夾用來(lái)存放標(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)物館',
   },
   //犀鳥(niǎo)館
   {<!--{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:'犀鳥(niǎo)館'
   },
   //火烈鳥(niǎo)館
   {<!--{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: '火烈鳥(niǎo)館'
   },
   //鸚鵡館
   {<!--{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/）中查詢(xún)。

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

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

3 結(jié)語(yǔ)

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

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

您可能感興趣的文章:

相關(guān)文章

微信小程序開(kāi)發(fā)之路由切換頁(yè)面重定向問(wèn)題
這篇文章主要介紹了微信小程序開(kāi)發(fā)之路由切換頁(yè)面重定向問(wèn)題，又通過(guò)實(shí)例代碼給大家介紹了微信小程序的路由跳轉(zhuǎn)方法,需要的朋友可以參考下
2018-09-09
JavaScript第一個(gè)分水嶺之?dāng)?shù)組的基本操作
Arrays(數(shù)組) 數(shù)組是一個(gè)固定長(zhǎng)度的存儲(chǔ)相同數(shù)據(jù)類(lèi)型的數(shù)據(jù)結(jié)構(gòu),數(shù)組中的元素被存儲(chǔ)在一段連續(xù)的內(nèi)存空間中,下面這篇文章主要給大家介紹了關(guān)于JavaScript第一個(gè)分水嶺之?dāng)?shù)組的基本操作,需要的朋友可以參考下
2022-04-04
JavaScript解構(gòu)賦值詳解
這篇文章主要為大家介紹了JavaScript解構(gòu)賦值，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
js復(fù)制到剪切板的實(shí)例方法
這篇文章介紹了復(fù)制到剪切板js代碼，有需要的朋友可以參考需要
2013-06-06
JavaScript設(shè)計(jì)模式之單例模式詳解
單例模式（Singleton Pattern）是一種創(chuàng)建型設(shè)計(jì)模式,確保一個(gè)類(lèi)只有一個(gè)實(shí)例,并提供全局訪問(wèn)該實(shí)例的方式,這在某些場(chǎng)景下非常有用,例如配置管理類(lèi)、日志類(lèi)或數(shù)據(jù)庫(kù)連接管理類(lèi),需要的朋友可以參考下
2024-08-08
淺析return false的正確使用
“return false”之所以被誤用的如此厲害，是因?yàn)樗雌饋?lái)像是完成了我們交給它的工作，瀏覽器不會(huì)再將我們重定向到href中的鏈接，表單也不會(huì)被繼續(xù)提交，但這么做到底有什么不對(duì)呢
2013-11-11
js中回調(diào)函數(shù)的學(xué)習(xí)筆記
這篇文章主要介紹了js中回調(diào)函數(shù)的相關(guān)知識(shí),需要的朋友可以參考下
2014-07-07
electron-builder 的基本使用及electron打包步驟
electron-builder 作為一個(gè)用于 Electron 應(yīng)用程序打包的工具,需要下載并使用 Electron 運(yùn)行時(shí)來(lái)創(chuàng)建可執(zhí)行文件,這篇文章主要介紹了electron-builder 的基本使用,需要的朋友可以參考下
2023-12-12
js實(shí)現(xiàn)網(wǎng)頁(yè)標(biāo)題欄閃爍提示效果實(shí)例分析
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)標(biāo)題欄閃爍提示效果的方法,以實(shí)例形式分析了網(wǎng)上比較常見(jiàn)的實(shí)現(xiàn)方法,并對(duì)于原理進(jìn)行分析并加以改進(jìn),最后給出了一個(gè)具體的應(yīng)用實(shí)例供大家參考,需要的朋友可以參考下
2014-11-11
在?localStorage?中上傳和檢索存儲(chǔ)圖像的示例詳解
這篇文章主要介紹了在?localStorage?中上傳和檢索存儲(chǔ)圖像,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06