原文地址：https://blog.csdn.net/summer_ck/java/article/details/89456675
主要實(shí)現(xiàn)功能：
a.進(jìn)入地圖界面，會(huì)自動(dòng)獲取當(dāng)前位置（用戶需授權(quán)地理位置權(quán)限），并顯示省市區(qū)在左上角，根據(jù)個(gè)人需求，我只顯示了區(qū)
b.大頭針實(shí)現(xiàn)，拖動(dòng)地圖，大頭針都能獲取到位置
c.左下角定位當(dāng)前位置實(shí)現(xiàn)，當(dāng)移動(dòng)地圖到別的位置，點(diǎn)擊左下角圖標(biāo)，會(huì)回歸到當(dāng)前位置
下面是代碼的實(shí)現(xiàn)
1. app.json文件中
? "permission":{
? "scope.userLocation":{
? ? "desc":"授權(quán)當(dāng)前位置"
? }
? }
效果圖
彈出授權(quán)權(quán)限的框，讓用戶手動(dòng)授權(quán)
2. map.wxml 布局文件
<view class='view-c'>
<view class='view-top'>
<text style="font-size: 24rpx;margin-top: 40rpx;? color: #b65151">當(dāng)前：{{district}}</text>
<input placeholder="輸入城市"? class='input-c' bindinput="getsuggest" value="{{backfill}}" />
</view>
<!-- 搜索 -->
<view wx:for="{{suggestion}}" wx:key="index" class="{{showview?'hidden':'view-center'}}">
? ? <!--綁定回填事件-->
? ? <view >
? ? <!--根據(jù)需求渲染相應(yīng)數(shù)據(jù)-->
? ? <!--渲染地址title-->
? ? <view class='item-title'? bindtap="backfill" id="{{index}}">{{item.title}}</view>
? ? <!--渲染詳細(xì)地址-->
? ? <view class='item-details'>{{item.addr}}</view>
? ? </view>
? ? </view>
<map
id="ofoMap"
longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"
scale="{{scale}}"
covers="{{covers}}" show-location
? class="{{showview?'map-c':'hidden'}}"
? ? bindregionchange="bindregionchange"
? ? controls="{{controls}}"
? bindcontroltap='bindcontroltap'
>
</map>
</view>
可以根據(jù)自己的需求畫布局，這里就不貼出wxss樣式文件了
3. map.js
const app = getApp()
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
var qqmapsdk;
// 實(shí)例化API核心類
var qqmapsdk = new QQMapWX({
? ? key: '開發(fā)密鑰（key）' // 必填
});
關(guān)于jar包，我這里用的是騰訊地圖的，可以去官網(wǎng)下
jar包下載地址：https://lbs.qq.com/qqmap_wx_jssdk/index.html
獲取當(dāng)前位置：
? onLoad: function () {
? ? qqmapsdk = new QQMapWX({
? ? ? key: 'CLTBZ-3GVWD-LZY4D-HCY2K-RK3EE-UDBWF' //這里自己的key秘鑰進(jìn)行填充
? ? });
? ? var that = this
? ? wx.showLoading({
? ? ? title: "定位中",
? ? ? mask: true
? ? })
? ? wx.getSystemInfo({
? ? ? success: (res) => {
? ? ? ? this.setData({
? ? ? ? ? controls: [
? ? ? ? ? ? {
? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? iconPath: '/images/marker.png',? //? 大頭針圖片
? ? ? ? ? ? ? position: {
? ? ? ? ? ? ? ? left: res.windowWidth / 2 - 11,
? ? ? ? ? ? ? ? top: res.windowHeight / 2 - 70,
? ? ? ? ? ? ? ? width: 26,
? ? ? ? ? ? ? ? height: 45
? ? ? ? ? ? ? },
? ? ? ? ? ? ? clickable: true
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? id: 2,
? ? ? ? ? ? ? iconPath: '/images/location.png', // 左下角定位圖片
? ? ? ? ? ? ? position: {
? ? ? ? ? ? ? ? left: 20,
? ? ? ? ? ? ? ? top: res.windowHeight - 100,
? ? ? ? ? ? ? ? width: 40,
? ? ? ? ? ? ? ? height: 40
? ? ? ? ? ? ? },
? ? ? ? ? ? ? clickable: true
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? })
? ? ? }
? ? })
? ? wx.getLocation({
? ? ? type: 'wgs84',
? ? ? //定位成功，更新定位結(jié)果
? ? ? success: function (res) {
? ? ? ? var latitude = res.latitude
? ? ? ? var longitude = res.longitude
? ? ? ? var speed = res.speed
? ? ? ? var accuracy = res.accuracy
? ? ? ? //經(jīng)緯度轉(zhuǎn)化為地址
? ? ? ? that.getLocal(latitude, longitude)
? ? ? ? that.setData({
? ? ? ? ? longitude: longitude,
? ? ? ? ? latitude: latitude,
? ? ? ? ? speed: speed,
? ? ? ? ? accuracy: accuracy
? ? ? ? })
? ? ? },
? ? ? //定位失敗回調(diào)
? ? ? fail: function () {
? ? ? ? wx.showToast({
? ? ? ? ? title: "定位失敗",
? ? ? ? ? icon: "none"
? ? ? ? })
? ? ? },
? ? ? complete: function () {
? ? ? ? //隱藏定位中信息進(jìn)度
? ? ? ? wx.hideLoading()
? ? ? }
? ? })
? }
經(jīng)緯度轉(zhuǎn)換為地址：
getLocal: function (latitude, longitude) {
? ? let vm = this;
? ? qqmapsdk.reverseGeocoder({
? ? ? location: {
? ? ? ? latitude: latitude,
? ? ? ? longitude: longitude
? ? ? },
? ? ? success: function (res) {
? ? ? ? console.log(JSON.stringify(res));
? ? ? ? let province = res.result.ad_info.province
? ? ? ? let city = res.result.ad_info.city
? ? ? ? let district = res.result.ad_info.district
? ? ? ? vm.setData({
? ? ? ? ? province: province,//省
? ? ? ? ? city: city,//市
? ? ? ? ? district: district,//區(qū)
? ? ? ? })
? ? ? },
? ? ? fail: function (res) {
? ? ? ? console.log(res);
? ? ? },
? ? ? complete: function (res) {
? ? ? ? // console.log(res);
? ? ? }
? ? });
? }
實(shí)現(xiàn)大頭針移動(dòng)選點(diǎn)
? bindregionchange: function (e) {
? ? var that = this
? ? if (e.type == "begin") {
? ? ? console.log("begin");
? ? } else if (e.type == "end") {
? ? ? var mapCtx = wx.createMapContext("ofoMap")
? ? ? mapCtx.getCenterLocation({
? ? ? ? success: function (res) {
? ? ? ? ? var latitude = res.latitude
? ? ? ? ? var longitude = res.longitude
? ? ? ? ? that.getLocal(latitude, longitude)
? ? ? ? }
? ? ? })
? ? }
? }
點(diǎn)擊icon回歸當(dāng)前位置
? bindcontroltap: function (e) {
? ? switch (e.controlId) {
? ? ? // 當(dāng)點(diǎn)擊圖標(biāo)location.png的圖標(biāo)，則觸發(fā)事件movetoPositioon()
? ? ? case 2:
? ? ? ? ? this.movetoPosition();
? ? ? ? break;
? ? }
? }
移動(dòng)定點(diǎn)
? movetoPosition: function () {
? ? this.mapCtx.moveToLocation();
? },
? onShow: function () {
? ? var that=this;
? ? console.log("onShow");
? ? that.mapCtx = wx.createMapContext("ofoMap");
? ? //this.movetoPosition();
? ? that.mapCtx.getCenterLocation({
? ? ? success: function (res) {
? ? ? ? var latitude = res.latitude
? ? ? ? var longitude = res.longitude
? ? ? ? that.getLocal(latitude, longitude)
? ? ? }
? ? })
? },
ok，以上就是實(shí)現(xiàn)功能的核心代碼塊了
————————————————
版權(quán)聲明：本文為CSDN博主「小c歐巴」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/summer_ck/java/article/details/89456675
