// 查詢附近/搜索關鍵詞 <template> <view> <!--地圖容器--> <map id="myMap" :markers="markers" style="width:100%;height:350px;" :longitude="longitude" :latitude="latitude" scale='16'> </map> <!-- 輸入框 --> <view class="cu-form-group"> <view class="title">查詢地址</view> <input placeholder="請輸入查詢地址關鍵詞" name="input" v-model="keyword"></input> </view> <!-- 搜索 --> <view class="padding flex flex-direction"> <button class="cu-btn bg-blue margin-tb-sm lg" @click="Search">查詢</button> </view> <!-- 列表 --> <view class="cu-list menu sm-border card-menu"> <!-- 每行列表 --> <view class="cu-item" v-for="(value,key) in listData" @click="beat_it(value.lat,value.lng)"> <view class="content padding-tb-sm"> <view> <image src="../../static/導航.png" style="width: 25px;height: 25px;"></image> </text>{{ value.title}} </view> <view class="text-gray text-sm"> <text class="text-gray" style="margin-left: 4px;">地址:{{ value.address }}</text> </view> </view> <view class="action" @click="check_distance(value.lat,value.lng)"> <image src="../../static/導航執行.png" style="width: 30px;height: 30px;float: right;margin-top: 1px;"></image> </view> </view> <!-- 每行列表 --> </view> <!-- 模態框 --> <view> <u-modal v-model="show" :content="content" show-confirm-button="true" show-cancel-button="true" confirm-text="查看路線" @confirm="confirm"></u-modal> </u-modal> </view> </view> </template> <script> // 引入SDK核心類，js文件根據自己業務，位置可自行放置 // var QQMapWX = require('../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js'); import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js'; export default { data() { return { qqmapsdk: "", longitude: "", latitude: "", keyword: "", distance: "", listData: [], show: false, content: "", markers: "", setData: [] } }, methods: { /* 跳轉路線規划 */ confirm() { uni.navigateTo({ url: '/pages/naviegation/naviegation' }) }, /* 地圖移動點擊地址位置 */ beat_it(lat, lon) { this.latitude = lat this.longitude = lon // 儲存session uni.setStorageSync('latitude_end', lat.toString()) uni.setStorageSync('longitude_end', lon.toString()) this.markers = [{ id: 0, latitude: lat, longitude: lon, width: 30, height: 30, iconPath: "../../static/naviegation/地圖地點.png", callout: { //可根據需求是否展示經緯度 content: "當前位置", color: '#FF3300', display: 'ALWAYS', fontSize: "20", }, }, ] }, /* 搜索 */ Search() { const that = this; that.listData = [] console.log("Search") that.qqmapsdk.search({ keyword: that.keyword, success: function(res) { // console.log(res) /* 遍歷渲染 */ if (res.status == 0) { res.data.some((item, i) => { that.listData.push({ id: item.id, title: item.title, category: item.category, address: item.address, tel: item.tel, lat: item.location.lat, lng: item.location.lng }) }) } }, fail: function(res) { console.log(res); }, complete: function(res) { console.log(res); } }); }, /* 位置授權 */ getAuthorizeInfo() { const that = this; uni.authorize({ scope: 'scope.userLocation', success() { // 允許授權 that.getLocationInfo(); }, fail() { // 拒絕授權 that.openConfirm(); console.log("你拒絕了授權，無法獲得周邊信息") } }) }, // 獲取地理位置 getLocationInfo() { const that = this; uni.getLocation({ type: 'wgs84', success(res) { that.latitude = res.latitude that.longitude = res.longitude uni.setStorageSync('latitude', res.latitude.toString()) uni.setStorageSync('longitude', res.longitude.toString()) // console.log("地址位置", res); that.markers = [{ id: 0, latitude: res.latitude, longitude: res.longitude, width: 30, height: 30, iconPath: "../../static/naviegation/地圖地點.png", callout: { //可根據需求是否展示經緯度 content: "當前位置", color: '#FF3300', display: 'ALWAYS', fontSize: "20", }, }, ] } }); }, // 再次獲取授權 // 當用戶第一次拒絕后再次請求授權 openConfirm() { uni.showModal({ title: '請求授權當前位置', content: '需要獲取您的地理位置，請確認授權', success: (res) => { if (res.confirm) { uni.openSetting(); // 打開地圖權限設置 } else if (res.cancel) { uni.showToast({ title: '你拒絕了授權，無法獲得周邊信息', icon: 'none', duration: 1000 }) } } }); }, /* 模態框打開后 計算距離 */ check_distance(lat, lng) { var _this = this; //調用距離計算接口 _this.qqmapsdk.calculateDistance({ //mode: 'driving',//可選值：'driving'（駕車）、'walking'（步行），不填默認：'walking',可不填 //from參數不填默認當前地址 //獲取表單提交的經緯度並設置from和to參數（示例為string格式） // from: e.detail.value.start || '', //若起點有數據則采用起點坐標，若為空默認當前地址 // to: e.detail.value.dest, //終點坐標 from: '', to: lat.toString() + "," + lng.toString(), success: function(res) { //成功后的回調 // console.log(res); var res = res.result; var dis = []; for (var i = 0; i < res.elements.length; i++) { dis.push(res.elements[i].distance); //將返回數據存入dis數組， } _this.distance = dis[0] // console.log("check_distance", _this.distance) _this.content = "本地點距離您" + _this.distance + "米" _this.show = true }, fail: function(error) { console.error(error); }, complete: function(res) { console.log(res); } }); } }, onLoad() { console.log("onLoad") this.qqmapsdk = new QQMapWX({ key: 'U key' }); this.getAuthorizeInfo(); // this.Search() }, onPullDownRefresh() { }, onReachBottom() { }, } </script> <style lang="scss" scoped> </style>
// 導航路線頁面/分類步行/騎行/駕車 <template> <view> <!-- 返回上一頁 --> <image src="../../static/返回.png" @click="back" style="width: 25px;height: 25px; position: absolute;z-index: 99;margin-top: 52rpx;margin-left: 20rpx;"></image> <!-- 地圖 --> <map id="myMap" style="width: 100%; height: 800px" :longitude="longitude" :latitude="latitude" scale='16' :markers="markers" :polyline="polyline" show-location> </map> <!-- 底部 --> <view class="box" style="position: absolute;bottom: 0px;width: 100%;"> <view class="cu-bar tabbar bg-white"> <view class="action" @click="walking"> <view class="cuIcon-cu-image"> <image src="../../static/naviegation/步行.png"></image> </view> <view :class="{'text-red':walkingisActive,'text-grey':walkingisError}">步行</view> </view> <view class="action" @click="bicycling"> <view class="cuIcon-cu-image" > <image src="../../static/naviegation/騎行.png"></image> </view> <view :class="{'text-red':bicyclingisActive,'text-grey':bicyclingisError}">騎行</view> </view> <view class="action" @click="driving"> <view class="cuIcon-cu-image"> <image src="../../static/naviegation/駕車.png"></image> </view> <view :class="{'text-red':drivingisActive,'text-grey':drivingisError}">駕車</view> </view> </view> </view> </view> </template> <script> // 引入SDK核心類，js文件根據自己業務，位置可自行放置 // var QQMapWX = require('../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js'); import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js'; export default { data() { return { longitude: "", latitude: "", longitude_end: "", latitude_end: "", mode:"walking", polyline: "", qqmapsdk: "", markers: [], /* 圖標 */ walkingisActive:true, walkingisError:false, bicyclingisActive:false, bicyclingisError:true, drivingisActive:false, drivingisError:true, } }, onLoad() { // console.log("onLoad") this.qqmapsdk = new QQMapWX({ key: 'U key' }); this.latitude_end = uni.getStorageSync('latitude_end') this.longitude_end = uni.getStorageSync('longitude_end') this.latitude = uni.getStorageSync('latitude') this.longitude = uni.getStorageSync('longitude') this.getAuthorizeInfo(); this.daohang() }, methods: { /* 返回 */ back(){ console.log("back") uni.navigateBack({ }) }, /* 路線類型 */ walking(){ this.mode = "walking"; this.daohang(); }, bicycling(){ this.mode = "bicycling"; this.daohang(); this.walkingisActive=false; this.walkingisError=true; this.bicyclingisActive=true; this.bicyclingisError=false; this.drivingisActive=false; this.drivingisError=true; }, driving(){ this.mode = "driving"; this.daohang(); this.walkingisActive=false; this.walkingisError=true; this.bicyclingisActive=false; this.bicyclingisError=true; this.drivingisActive=true; this.drivingisError=false; }, /* 位置授權 */ getAuthorizeInfo() { const that = this; uni.authorize({ scope: 'scope.userLocation', success() { // 允許授權 that.getLocationInfo(); }, fail() { // 拒絕授權 that.openConfirm(); console.log("你拒絕了授權，無法獲得周邊信息") } }) }, // 獲取地理位置 getLocationInfo() { const that = this; uni.getLocation({ type: 'wgs84', success(res) { that.latitude = res.latitude that.longitude = res.longitude // console.log("地址位置", res); } }); }, // 再次獲取授權 // 當用戶第一次拒絕后再次請求授權 openConfirm() { uni.showModal({ title: '請求授權當前位置', content: '需要獲取您的地理位置，請確認授權', success: (res) => { if (res.confirm) { uni.openSetting(); // 打開地圖權限設置 } else if (res.cancel) { uni.showToast({ title: '你拒絕了授權，無法獲得周邊信息', icon: 'none', duration: 1000 }) } } }); }, /* 路線規划 */ daohang() { const that = this; // console.log("目標位置",uni.getStorageSync('latitude_end') + "," + uni.getStorageSync('longitude_end')) // console.log("起點位置",that.latitude.toString() + "," + that.longitude.toString()) //調用距離計算接口 that.qqmapsdk.direction({ mode: that.mode, //可選值：'driving'（駕車）、'walking'（步行）、'bicycling'（騎行），不填默認：'driving',可不填 //from參數不填默認當前地址 from: that.latitude.toString() + "," + that.longitude.toString(), to: uni.getStorageSync('latitude_end') + "," + uni.getStorageSync('longitude_end'), success: function(res) { var ret = res; var coors = ret.result.routes[0].polyline, pl = []; //坐標解壓（返回的點串坐標，通過前向差分進行壓縮） var kr = 1000000; for (var i = 2; i < coors.length; i++) { coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr; } //將解壓后的坐標放入點串數組pl中 for (var i = 0; i < coors.length; i += 2) { pl.push({ latitude: coors[i], longitude: coors[i + 1] }) } // console.log(pl) // 設置polyline屬性，將路線顯示出來,將解壓坐標第一個數據作為起點 that.latitude = pl[0].latitude, that.longitude = pl[0].longitude, that.polyline = [{ points: pl, color: "#00CC66", //線條的顏色 borderColor:"#009900", width: 10, //寬度 arrowLine: true, //是否帶箭頭 borderWidth: 2 ,//線的邊框寬度，還有很多參數，請看文檔 }] that.markers = [{ id: 0, latitude: that.latitude, longitude: that.longitude, width: 30, height: 30, iconPath:"../../static/naviegation/地圖地點.png", callout: { //可根據需求是否展示經緯度 content: "起點", color: '#FF3300', display: 'ALWAYS', fontSize: "20", }, }, { id: 1, latitude: that.latitude_end, longitude: that.longitude_end, width: 30, height: 30, iconPath:"../../static/naviegation/地圖地點.png", callout: { //可根據需求是否展示經緯度 content: "終點", color: '#FF3300', display: 'ALWAYS', fontSize: "20", }, }, ] }, fail: function(error) { console.error(error); }, complete: function(res) { console.log(res); } }); } }, } </script> <style> </style>
## 加入導航詳情
<template> <view> <!-- 顯示估計距離與時間 --> <view style="position: absolute;bottom: 60px;right: 10px;z-index: 100;"> <u-tag :text="distance" mode="light" /> <u-tag :text="duration" mode="light" /> <u-tag text="開啟文字導航" mode="light" @click="open" /> </view> <!-- 地圖 --> <map id="myMap" style="width: 100%; height: 700px" :longitude="longitude" :latitude="latitude" scale='16' :markers="markers" :polyline="polyline" show-location> </map> <!-- 底部 --> <view class="box" style="position: absolute;bottom: 0px;width: 100%;"> <view class="cu-bar tabbar bg-white"> <view class="action" @click="walking"> <view class="cuIcon-cu-image"> <image src="../../static/naviegation/步行.png"></image> </view> <view :class="{'text-olive':walkingisActive,'text-black':walkingisError}">步行</view> </view> <view class="action" @click="bicycling"> <view class="cuIcon-cu-image"> <image src="../../static/naviegation/騎行.png"></image> </view> <view :class="{'text-olive':bicyclingisActive,'text-black':bicyclingisError}">騎行</view> </view> <view class="action" @click="driving"> <view class="cuIcon-cu-image"> <image src="../../static/naviegation/駕車.png"></image> </view> <view :class="{'text-olive':drivingisActive,'text-black':drivingisError}">駕車</view> </view> </view> </view> <!-- 模態框 --> <view> <u-modal v-model="show" :content="content" show-confirm-button="true" confirm-text="知道了"></u-modal> </u-modal> </view> <!-- 彈出框 --> <u-popup v-model="popshow" mode="top" length="60%" :zoom="true" border-radius="14" z-index="99999" style="height: 100%;" > <view style="margin-left: 10px;"> <u-steps :list="numList" :current="0" direction="column"></u-steps> </view> </u-popup> </view> </template> <script> // 引入SDK核心類，js文件根據自己業務，位置可自行放置 // var QQMapWX = require('../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js'); import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js'; export default { data() { return { longitude: "", latitude: "", longitude_end: "", latitude_end: "", mode: "driving", polyline: "", qqmapsdk: "", markers: [], distance: "", duration: "", /* 模態框 */ show: false, content: "", /* 彈出框 */ popshow: false, numList: [], /* 圖標 */ walkingisActive: false, walkingisError: true, bicyclingisActive: false, bicyclingisError: true, drivingisActive: true, drivingisError: false, } }, onLoad() { // console.log("onLoad") this.qqmapsdk = new QQMapWX({ key: 'U-KEY' }); this.latitude_end = uni.getStorageSync('latitude_end') this.longitude_end = uni.getStorageSync('longitude_end') this.latitude = uni.getStorageSync('latitude') this.longitude = uni.getStorageSync('longitude') this.getAuthorizeInfo(); this.daohang() }, methods: { /* 彈出框 */ open() { this.popshow = true }, /* 路線類型 */ walking() { this.mode = "walking"; this.daohang(); this.walkingisActive = true; this.walkingisError = false; this.bicyclingisActive = false; this.bicyclingisError = true; this.drivingisActive = false; this.drivingisError = true; }, bicycling() { this.mode = "bicycling"; this.daohang(); this.walkingisActive = false; this.walkingisError = true; this.bicyclingisActive = true; this.bicyclingisError = false; this.drivingisActive = false; this.drivingisError = true; }, driving() { this.mode = "driving"; this.daohang(); }, /* 位置授權 */ getAuthorizeInfo() { const that = this; uni.authorize({ scope: 'scope.userLocation', success() { // 允許授權 that.getLocationInfo(); }, fail() { // 拒絕授權 that.openConfirm(); console.log("你拒絕了授權，無法獲得周邊信息") } }) }, // 獲取地理位置 getLocationInfo() { const that = this; uni.getLocation({ type: 'wgs84', success(res) { that.latitude = res.latitude that.longitude = res.longitude // console.log("地址位置", res); uni.setStorageSync('latitude', res.latitude.toString()) uni.setStorageSync('longitude', res.longitude.toString()) // console.log("獲取位置latitude",uni.getStorageSync('latitude')) // console.log("獲取位置longitude",uni.getStorageSync('longitude')) } }); }, // 再次獲取授權 // 當用戶第一次拒絕后再次請求授權 openConfirm() { uni.showModal({ title: '請求授權當前位置', content: '需要獲取您的地理位置，請確認授權', success: (res) => { if (res.confirm) { uni.openSetting(); // 打開地圖權限設置 } else if (res.cancel) { uni.showToast({ title: '你拒絕了授權，無法獲得周邊信息', icon: 'none', duration: 1000 }) } } }); }, /* 路線規划 */ daohang() { const that = this; // console.log("路線規划",uni.getStorageSync('latitude') + "," + uni.getStorageSync('longitude')) //調用距離計算接口 that.qqmapsdk.direction({ mode: that.mode, //可選值：'driving'（駕車）、'walking'（步行）、'bicycling'（騎行），不填默認：'driving',可不填 //from參數不填默認當前地址 from: uni.getStorageSync('latitude') + "," + uni.getStorageSync('longitude'), to: uni.getStorageSync('latitude_end') + "," + uni.getStorageSync('longitude_end'), success: function(res) { var ret = res; // console.log(ret) that.distance = "總距離" + res.result.routes[0].distance + "米" that.duration = "預計" + res.result.routes[0].duration + "分鍾到達目的地", // 詳細步驟 that.numList = [] ret.result.routes[0].steps.some((item, i) => { that.numList.push({ name : i + ":" + item.instruction }) }) var coors = ret.result.routes[0].polyline, pl = []; //坐標解壓（返回的點串坐標，通過前向差分進行壓縮） var kr = 1000000; for (var i = 2; i < coors.length; i++) { coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr; } //將解壓后的坐標放入點串數組pl中 for (var i = 0; i < coors.length; i += 2) { pl.push({ latitude: coors[i], longitude: coors[i + 1] }) } // console.log(pl) // 設置polyline屬性，將路線顯示出來,將解壓坐標第一個數據作為起點 that.latitude = pl[0].latitude, that.longitude = pl[0].longitude, that.polyline = [{ points: pl, color: "#6633FF", //線條的顏色 borderColor: "#9966FF", width: 10, //寬度 arrowLine: true, //是否帶箭頭 borderWidth: 2, //線的邊框寬度，還有很多參數，請看文檔 }] that.markers = [{ id: 0, latitude: that.latitude, longitude: that.longitude, width: 30, height: 30, iconPath: "../../static/naviegation/地圖地點.png", callout: { //可根據需求是否展示經緯度 content: "起點", color: '#0033FF', display: 'ALWAYS', fontSize: "20", }, }, { id: 1, latitude: that.latitude_end, longitude: that.longitude_end, width: 30, height: 30, iconPath: "../../static/naviegation/地圖地點.png", callout: { //可根據需求是否展示經緯度 content: "終點", color: '#0033FF', display: 'ALWAYS', fontSize: "20", }, }, ] }, fail: function(error) { // console.error("error",error); that.show = true that.content = "豬頭，距離太長了~" }, complete: function(res) { console.log(res); } }); } }, } </script> <style> </style>
效果圖：
