微信小程序 地圖(map)實(shí)例詳解
微信小程序 地圖(map)實(shí)例
這里是小編對(duì)微信小程序 地圖(map API )做的資料整理,獲取當(dāng)前的地址,應(yīng)該如何實(shí)現(xiàn)的實(shí)例,大家可以看下。
今天做到地圖定位的模塊.模擬器肯定是獲取不到位置的.下面為真機(jī)測(cè)試結(jié)果.
上圖:


經(jīng)緯度不說(shuō)了.定位用的,我這里直接輸入的數(shù)字定位.但是有許多問(wèn)題
下圖中scale是縮放比例,這個(gè)屬性目前無(wú)效.后期微信團(tuán)隊(duì)?wèi)?yīng)該會(huì)修復(fù).畢竟現(xiàn)在剛開(kāi)始公測(cè).這樣就導(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)可以直接打開(kāi)地圖.
具體api見(jiàn)文檔

3.wx.openLocation(OBJECT) 查看位置
最簡(jiǎn)單粗暴的就是直接給經(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ī)測(cè)試 效果圖:

感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序 地圖定位簡(jiǎn)單實(shí)例
- 微信小程序中進(jìn)行地圖導(dǎo)航功能的實(shí)現(xiàn)方法
- 微信小程序 使用騰訊地圖SDK詳解及實(shí)現(xiàn)步驟
- 微信小程序 高德地圖SDK詳解及簡(jiǎn)單實(shí)例(源碼下載)
- 微信小程序 地圖map詳解及簡(jiǎn)單實(shí)例
- 微信小程序開(kāi)發(fā)之map地圖實(shí)現(xiàn)教程
- 微信小程序之獲取當(dāng)前位置經(jīng)緯度以及地圖顯示詳解
- 微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解
- 微信小程序地圖(map)組件點(diǎn)擊(tap)獲取經(jīng)緯度的方法
- 微信小程序map地圖使用方法詳解
相關(guān)文章
微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽(tīng)的實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽(tīng)的實(shí)例的相關(guān)資料,這里提供image觸摸并監(jiān)聽(tīng)的簡(jiǎn)單實(shí)例,需要的朋友可以參考下2017-08-08
JavaScript 對(duì)象詳細(xì)整理總結(jié)
這篇文章主要介紹了JavaScript 對(duì)象詳細(xì)整理總結(jié)的相關(guān)資料,需要的朋友可以參考下2016-09-09
arcgis?js完整懸停效果實(shí)現(xiàn)demo
如何編寫(xiě)高質(zhì)量 JavaScript 代碼

