微信小程序地圖標記多個位置的方法詳解
更新時間：2022年04月21日 11:45:39 作者：算法與編程之美
地圖是我們平時經(jīng)常用到的組件,而且地圖是顯示在最高層的原生組件,下面這篇文章主要給大家介紹了關(guān)于微信小程序地圖標記多個位置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
1 問題
如何在微信小程序?qū)崿F(xiàn)標記多個位置。
2 方法
1.在pages文件夾下新建image文件夾用來存放標記的圖片。
2.在map標簽中添加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: [
//貘科動物館
{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
id: 0,
iconPath: "../image/動物園.png",
latitude: 39.941386,
longitude: 116.336655,
width: 30, //圖片顯示寬度
height: 30,//圖片顯示高度
title:'貘科動物館',
},
//犀鳥館
{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
id: 1,
iconPath: "../image/動物園.png",
latitude: 39.940826,
longitude: 116.335109,
width: 30,
height: 30,
title:'犀鳥館'
},
//火烈鳥館
{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
id: 2,
iconPath: "../image/動物園.png",
latitude: 39.940578,
longitude: 116.335977,
width: 30,
height: 30,
title: '火烈鳥館'
},
//鸚鵡館
{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
id: 3,
iconPath: "../image/動物園.png",
latitude: 39.941573,
longitude: 116.335544,
width: 30,
height: 30,
title: '鸚鵡館'
}]4.注意：
①iconpath屬性的路徑要與標記圖片保存的路徑一致；
②markers屬性的代碼要放在data{}里面，否則不會顯示標記點；
③標記點的坐標可以在騰訊地圖坐標拾取器（https://lbs.qq.com/getPoint/）中查詢。
5.完成以上操作后效果如圖：
本次標記點用到的圖標是：
3 結(jié)語
本次介紹了如何在微信小程序的地圖上插入標記點，下期將介紹小程序地圖不同標記點的跳轉(zhuǎn)。
到此這篇關(guān)于微信小程序地圖標記多個位置的文章就介紹到這了,更多相關(guān)小程序地圖標記位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序開發(fā)之路由切換頁面重定向問題，又通過實例代碼給大家介紹了微信小程序的路由跳轉(zhuǎn)方法,需要的朋友可以參考下2018-09-09
Arrays(數(shù)組) 數(shù)組是一個固定長度的存儲相同數(shù)據(jù)類型的數(shù)據(jù)結(jié)構(gòu),數(shù)組中的元素被存儲在一段連續(xù)的內(nèi)存空間中,下面這篇文章主要給大家介紹了關(guān)于JavaScript第一個分水嶺之數(shù)組的基本操作,需要的朋友可以參考下2022-04-04
這篇文章主要為大家介紹了JavaScript解構(gòu)賦值，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章介紹了復制到剪切板js代碼，有需要的朋友可以參考需要2013-06-06
單例模式（Singleton Pattern）是一種創(chuàng)建型設(shè)計模式,確保一個類只有一個實例,并提供全局訪問該實例的方式,這在某些場景下非常有用,例如配置管理類、日志類或數(shù)據(jù)庫連接管理類,需要的朋友可以參考下2024-08-08
“return false”之所以被誤用的如此厲害，是因為它看起來像是完成了我們交給它的工作，瀏覽器不會再將我們重定向到href中的鏈接，表單也不會被繼續(xù)提交，但這么做到底有什么不對呢2013-11-11
這篇文章主要介紹了js中回調(diào)函數(shù)的相關(guān)知識,需要的朋友可以參考下2014-07-07
electron-builder 的基本使用及electron打包步驟
electron-builder 作為一個用于 Electron 應用程序打包的工具,需要下載并使用 Electron 運行時來創(chuàng)建可執(zhí)行文件,這篇文章主要介紹了electron-builder 的基本使用,需要的朋友可以參考下2023-12-12
js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果實例分析
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果的方法,以實例形式分析了網(wǎng)上比較常見的實現(xiàn)方法,并對于原理進行分析并加以改進,最后給出了一個具體的應用實例供大家參考,需要的朋友可以參考下2014-11-11
在?localStorage?中上傳和檢索存儲圖像的示例詳解
這篇文章主要介紹了在?localStorage?中上傳和檢索存儲圖像,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06