微信小程序 地圖（map）實例詳解
更新時間：2016年11月16日 10:09:57 作者：dzp_coder
這篇文章主要介紹了微信小程序 地圖（map）實例詳解的相關(guān)資料,這里對微信小程序的地圖API 進(jìn)行了詳細(xì)介紹并附示例代碼和實現(xiàn)效果圖，需要的朋友可以參考下
微信小程序 地圖（map）實例
這里是小編對微信小程序 地圖（map API ）做的資料整理，獲取當(dāng)前的地址，應(yīng)該如何實現(xiàn)的實例，大家可以看下。
今天做到地圖定位的模塊.模擬器肯定是獲取不到位置的.下面為真機(jī)測試結(jié)果.
上圖:
經(jīng)緯度不說了.定位用的,我這里直接輸入的數(shù)字定位.但是有許多問題
下圖中scale是縮放比例,這個屬性目前無效.后期微信團(tuán)隊?wèi)?yīng)該會修復(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)用實例
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)用實例
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ī)測試 效果圖:
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
JS代碼的格式化和壓縮...2006-06-06
這篇文章主要介紹了微信小程序 wxapp地圖 map基礎(chǔ)知識的相關(guān)資料,并附簡單實例，幫助大家學(xué)習(xí)理解，需要的朋友可以參考下2016-10-10
微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實例的相關(guān)資料,這里提供image觸摸并監(jiān)聽的簡單實例，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了JavaScript 對象詳細(xì)整理總結(jié)的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了詳解微信小程序Radio選中樣式切換的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了微信小程序 audio 組件實例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了最近火爆全網(wǎng)的?Evil.js?源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了arcgis?js完整懸停效果實現(xiàn)demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02 
如果要編寫出高質(zhì)量的 JavaScript 代碼，可以從以下三個方面去考慮。分別是：易閱讀的代碼、高性能的代碼、健壯性的代碼。下面我將分別對這三個方面進(jìn)行闡述。需要的朋友可以參考一下
2021-09-09