微信小程序 地圖(map)實(shí)例詳解
微信小程序 地圖(map)實(shí)例
這里是小編對微信小程序 地圖(map API )做的資料整理,獲取當(dāng)前的地址,應(yīng)該如何實(shí)現(xiàn)的實(shí)例,大家可以看下。
今天做到地圖定位的模塊.模擬器肯定是獲取不到位置的.下面為真機(jī)測試結(jié)果.
上圖:
經(jīng)緯度不說了.定位用的,我這里直接輸入的數(shù)字定位.但是有許多問題
下圖中scale是縮放比例,這個(gè)屬性目前無效.后期微信團(tuán)隊(duì)?wèi)?yīng)該會(huì)修復(fù).畢竟現(xiàn)在剛開始公測.這樣就導(dǎo)致我不管怎么修改scale,我的地圖都是在默認(rèn)的縮放比例.如上圖.
markers中的rotate是圖標(biāo)的旋轉(zhuǎn)角度.如果需要平行于屏幕的圖標(biāo),那就設(shè)置為0吧.
另外,覆蓋物的圖標(biāo)是可以修改的.給iconPath設(shè)置路徑即可.
上一段代碼:
<!--index.wxml--> <button class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位</button> <map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"></map>
//index.js //獲取應(yīng)用實(shí)例 var app = getApp() Page({ data: { latitude: 0,//緯度 longitude: 0,//經(jīng)度 speed: 0,//速度 accuracy: 16,//位置精準(zhǔn)度 markers: [], covers: [], }, onLoad: function () { }, getlocation: function () { var markers = [{ latitude: 31.23, longitude: 121.47, name: '浦東新區(qū)', desc: '我的位置' }] var covers = [{ latitude: 31.23, longitude: 121.47, iconPath: '../images/car.png', rotate: 0 }] this.setData({ longitude: 121.47, latitude: 31.23, markers: markers, covers: covers, }) } })
2.wx.getLocation(OBJECT) 獲取當(dāng)前位置API
紅色框標(biāo)出的就是經(jīng)緯度,速度,精確度
用gch02返回的坐標(biāo)可以直接打開地圖.
具體api見文檔
3.wx.openLocation(OBJECT) 查看位置
最簡單粗暴的就是直接給經(jīng)緯度定位.
代碼:
/index.js //獲取應(yīng)用實(shí)例 var app = getApp() Page({ data: { latitude: 0,//緯度 longitude: 0,//經(jīng)度 speed: 0,//速度 accuracy: 16,//位置精準(zhǔn)度 markers: [], covers: [], }, onLoad: function () { }, getlocation: function () { wx.getLocation({ type: 'gcj02', success: function (res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy console.log("latitude:" + latitude) console.log("longitude:" + longitude) console.log("speed:" + speed) console.log("accuracy:" + accuracy) wx.openLocation({ latitude: latitude, longitude: longitude, scale: 28 }) } }) } })
真機(jī)測試 效果圖:
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- 微信小程序 地圖定位簡單實(shí)例
- 微信小程序中進(jìn)行地圖導(dǎo)航功能的實(shí)現(xiàn)方法
- 微信小程序 使用騰訊地圖SDK詳解及實(shí)現(xiàn)步驟
- 微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)
- 微信小程序 地圖map詳解及簡單實(shí)例
- 微信小程序開發(fā)之map地圖實(shí)現(xiàn)教程
- 微信小程序之獲取當(dāng)前位置經(jīng)緯度以及地圖顯示詳解
- 微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解
- 微信小程序地圖(map)組件點(diǎn)擊(tap)獲取經(jīng)緯度的方法
- 微信小程序map地圖使用方法詳解
相關(guān)文章
前端必會(huì)的package.json創(chuàng)建及常見屬性用法示例詳解
這篇文章主要為大家介紹了前端必會(huì)的package.json創(chuàng)建及常見屬性用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08微信小程序 HTTPS報(bào)錯(cuò)整理常見問題及解決方案
這篇文章主要介紹了微信小程序 HTTPS報(bào)錯(cuò)常見問題及解決方案的相關(guān)資料,需要的朋友可以參考下2016-12-12類和原型的設(shè)計(jì)模式之復(fù)制與委托差異
這篇文章主要為大家介紹了類和原型的設(shè)計(jì)模式之復(fù)制與委托差異詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實(shí)例的相關(guān)資料,這里提供image觸摸并監(jiān)聽的簡單實(shí)例,需要的朋友可以參考下2017-08-08JavaScript架構(gòu)localStorage特殊場景下二次封裝操作
這篇文章主要為大家介紹了JavaScript架構(gòu)localStorage在特殊場景下的二次封裝操作,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06微信小程序 滾動(dòng)到某個(gè)位置添加class效果實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序 滾動(dòng)到某個(gè)位置添加class效果實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04TypeScript新語法之infer?extends示例詳解
這篇文章主要為大家介紹了TypeScript新語法之infer?extends示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08