// packageD/mycomponent/yz_wap/yz_wapmap.js var QQMapWX = require("../../../mymap/qqmap-wx-jssdk.min"); var qqmapsdk; // var map; var app = getApp(); Component({ addGlobalClass: true, /** * 组件的属性列表 */ properties: { local_city:{ value:'', type:String }, polygons: { value: [], type: Array } }, pageLifetimes: { show: function () { let that = this; wx.getSystemInfo({ success: (result) => { console.log(result); if(result.platform == 'android'){ that.setData({ android:true }); } }, }); if (!app.globalData.qqmapkey) { app._getTemplate().then((res) => { qqmapsdk = new QQMapWX({ key: app.globalData.qqmapkey, }); this.poscurrent(); }); } else { qqmapsdk = new QQMapWX({ key: app.globalData.qqmapkey, }); this.poscurrent(); } }, }, /** * 组件的初始数据 */ data: { android:false, suggestion: [], address_latitude: "", address_longitude: "", markers: [], address_detail: "", suggestionshow: false, mksData: [], mapmessageData: { title: "", message: "", latitude: "", longitude: "", city: "", }, updatePoint: {}, scaleData: 16, tag: "", }, /** * 组件的方法列表 */ methods: { searchconfirmbtn(e) { var val = e.detail.value; this.addressinp(val); }, addressinpbtn(e) { var val = e.detail.value; this.addressinp(val); }, addressinp(val) { var _this = this; if (!val) { this.setData({ suggestionshow: false, }); return; } //调用关键词提示接口 qqmapsdk.getSuggestion({ //获取输入框值并设置keyword参数 keyword: val, //用户输入的关键词,可设置固定值,如keyword:'KFC' region: this.data.local_city, //设置城市名,限制关键词所示的地域范围,非必填参数 region_fix: 1, sig: app.globalData.qqmapsig, success: function (res) { //搜索成功后的回调 var sug = []; for (var i = 0; i < res.data.length; i++) { sug.push({ // 获取返回结果,放到sug数组中 title: res.data[i].title, id: res.data[i].id, addr: res.data[i].address, city: res.data[i].city, district: res.data[i].district, latitude: res.data[i].location.lat, longitude: res.data[i].location.lng, }); } _this.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示 suggestion: sug, suggestionshow: true, }); }, fail: function (error) { console.error(error); }, complete: function (res) {}, }); }, //数据回填方法 backfill: function (e) { var id = e.currentTarget.id; for (var i = 0; i < this.data.suggestion.length; i++) { if (i == id) { this.setData({ address_detail: this.data.suggestion[i].title, address_latitude: this.data.suggestion[i].latitude, address_longitude: this.data.suggestion[i].longitude, "mapmessageData.title": this.data.suggestion[i].title, "mapmessageData.message": this.data.suggestion[i].addr, "mapmessageData.latitude": this.data.suggestion[i].latitude, "mapmessageData.longitude": this.data.suggestion[i].longitude, "mapmessageData.city": this.data.suggestion[i].city, suggestionshow: false, }); this.nearby_search(); } } }, // 事件触发,调用接口 nearby_search: function () { var _this = this; // 调用接口 qqmapsdk.search({ keyword: this.data.address_detail, //搜索关键词 region: this.data.local_city, location: { latitude: this.data.address_latitude, longitude: this.data.address_longitude, }, //设置周边搜索中心点 sig: app.globalData.qqmapsig, success: function (res) { //搜索成功后的回调 console.log("ccccc", res); var mks = []; var mksData = []; for (var i = 0; i < res.data.length; i++) { mks.push({ // 获取返回结果,放到mks数组中 title: res.data[i].title, id: res.data[i].id, latitude: res.data[i].location.lat, longitude: res.data[i].location.lng, zIndex: 10, iconPath: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", //图标路径 width: 20, height: 25, callout: { padding: "10rpx", borderRadius: "5rpx", content: res.data[i].title, }, }); mksData.push({ address: res.data[i].address, title: res.data[i].title, latitude: res.data[i].location.lat, longitude: res.data[i].location.lng, id: res.data[i].id, city: res.data[i].ad_info.city ? res.data[i].ad_info.city : res.res.data[i].ad_info.province, }); } _this.setData({ //设置markers属性,将搜索结果显示在地图中 markers: mks, mksData: mksData, }); }, fail: function (res) { console.log(res); }, complete: function (res) { // console.log(res); }, }); }, getmarkertap(e) { let markerId = e.markerId; if(markerId == '-1') { this.setData({ "mapmessageData.title": "", "mapmessageData.message": "自选位置", "mapmessageData.latitude": this.data.updatePoint.latitude, "mapmessageData.longitude": this.data.updatePoint.longitude, address_latitude: this.data.updatePoint.latitude, address_longitude: this.data.updatePoint.longitude, }); } for (var i = 0; i < this.data.mksData.length; i++) { let id = this.data.mksData[i].id; if (markerId == id) { // markerId == id 要真机预览调试才可以 this.setData({ address_latitude: this.data.mksData[i].latitude, address_longitude: this.data.mksData[i].longitude, "mapmessageData.title": this.data.mksData[i].title, "mapmessageData.message": this.data.mksData[i].address, "mapmessageData.latitude": this.data.mksData[i].latitude, "mapmessageData.longitude": this.data.mksData[i].longitude, "mapmessageData.city": this.data.mksData[i].city, }); } } }, maptap(e) { // 真机触发了getmarkertap就不会触发maptap if(!this.data.polygons || this.data.polygons.length <= 0) { return; } console.log(e,"maptap"); let updatePoint = { // 获取返回结果,放到mks数组中 title: '自选位置', id: '-1', latitude: e.detail.latitude, longitude: e.detail.longitude, zIndex: 2, iconPath: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", //图标路径 width: 20, height: 25, callout: { padding: "10rpx", borderRadius: "5rpx", content: '自选位置', }, }; if(this.data.markers && this.data.markers.length > 0 && this.data.markers[this.data.markers.length -1].id != '-1') { this.data.markers.push(updatePoint); }else { this.data.markers[this.data.markers.length -1] = updatePoint; } this.setData({ updatePoint: updatePoint, //设置markers属性,将搜索结果显示在地图中 markers: this.data.markers, "mapmessageData.title": "", "mapmessageData.message": "自选位置", "mapmessageData.latitude": e.detail.latitude, "mapmessageData.longitude": e.detail.longitude, address_latitude: e.detail.latitude, address_longitude: e.detail.longitude, }); }, addbtn() { let mapCtx = wx.createMapContext("myMap",this); // console.log(mapCtx); let that = this; mapCtx.getScale({ success: function (e) { let scale = e.scale; that.setData({ scaleData: scale + 1, }); }, }); }, minusbtn() { let mapCtx = wx.createMapContext("myMap",this); let that = this; mapCtx.getScale({ success: function (e) { let scale = e.scale; that.setData({ scaleData: scale - 1, }); }, }); }, addressplay() { this.poscurrent(); }, poscurrent: function () { let that = this; wx.getSetting({ success(resData) { if (!resData.authSetting["scope.userLocation"]) { wx.authorize({ scope: "scope.userLocation", success() {}, fail() {}, complete() { that.getlocaldata(); }, }); } else { that.getlocaldata(); } }, }); }, getlocaldata() { let that = this; wx.getLocation({ type: "gcj02", success(res) { const latitude = res.latitude; const longitude = res.longitude; // const speed = res.speed; // const accuracy = res.accuracy; that._setaddressData({ lat: latitude, lng: longitude, }); }, fail(err) { if (err.errMsg === "getLocation:fail auth deny") { console.log("当初用户拒绝,再次发起授权"); wx.openSetting({ success(settingdata) { if (settingdata.authSetting["scope.userLocation"]) { wx.showToast({ icon: "none", title: "获取权限成功", duration: 1500, }); that.getlocaldata(); } else { wx.showToast({ icon: "none", title: "获取权限失败,定位需要用户授权", duration: 1500, }); } }, }); } }, }); }, _setaddressData(e) { let that = this; qqmapsdk.reverseGeocoder({ //位置坐标,默认获取当前位置,非必须参数 location: { latitude: e.lat, longitude: e.lng, }, sig: app.globalData.qqmapsig, success: function (res) { //成功后的回调 that.setData({ address_detail: "", address_latitude: res.result.location.lat, address_longitude: res.result.location.lng, "mapmessageData.title": res.result.formatted_addresses.recommend, "mapmessageData.message": res.result.address, "mapmessageData.latitude": res.result.location.lat, "mapmessageData.longitude": res.result.location.lng, "mapmessageData.city": res.result.address_component.city ? res.result.address_component.city : res.result.address_component.province, }); }, fail: function (error) { wx.showToast({ duration: 3000, title: error.message, icon: "none", }); }, complete: function (res) {}, }); }, onClickLeft(){ this.triggerEvent('confirm', 'noshow'); }, buttonbtn() { let point = { lat: Number(Number(this.data.address_latitude).toFixed(6)), lng: Number(Number(this.data.address_longitude).toFixed(6)), address:this.data.mapmessageData.title }; if(!this.data.polygons || this.data.polygons.length <= 0) { wx.setStorage({ key: "address-point", data: { point: point, city: this.data.mapmessageData.city, }, }); } this.triggerEvent('confirm', point); }, } });