设为首页收藏本站
开启辅助访问

uniapp 利用map标签 开发地图定位和搜索关键字查询功能

 您所在的位置：网站首页 › 百度地图搜索地址是如何实现的 › uniapp 利用map标签 开发地图定位和搜索关键字查询功能

uniapp 利用map标签 开发地图定位和搜索关键字查询功能

2024-07-14 08:26| 来源: 网络整理| 查看: 265

话不多说进入正题

简单实用地图

export default { onLoad() { }, //相关配置参数 data() { return { // 初始化的中心位置 latitude: 23.099994, longitude: 113.324520, // 标记点 markers: [{ id: 1, latitude: 23.099994, longitude: 113.324520, name: 'T.I.T 创意园' }], } }, methods:{ } } .page-section-gap{ box-sizing: border-box; padding: 0 30rpx; } .page-body-button { margin-bottom: 30rpx; }

效果! 在这里插入图片描述 想要地图初始化的时候位置显示为当前定位

var self ,mapCtx export default { onLoad() { self = this // 获取当前map mapCtx = wx.createMapContext('myMap') self.getAuthorizeInfo() }, //相关配置参数 data() { return { // 初始化的中心位置 latitude: 23.099994, longitude: 113.324520, // 标记点 markers: [{ id: 1, latitude: 23.099994, longitude: 113.324520, name: 'T.I.T 创意园' }], } }, methods:{ // 位置授权 getAuthorizeInfo(){ uni.authorize({ scope: 'scope.userLocation', success() { // 允许授权 self.getLocationInfo(); }, fail(){ // 拒绝授权 self.openConfirm(); console.log("你拒绝了授权，无法获得周边信息") } }) }, // 获取地理位置 getLocationInfo(){ uni.getLocation({ type: 'wgs84', success (res) { console.log(res,"当前位置"); // 移动到当前位置 self.toLocation(res) self.latitude = res.latitude; self.longitude = res.longitude; } }); }, // 再次获取授权 // 当用户第一次拒绝后再次请求授权 openConfirm(){ uni.showModal({ title: '请求授权当前位置', content: '需要获取您的地理位置，请确认授权', success: (res)=> { if (res.confirm) { uni.openSetting();// 打开地图权限设置 } else if (res.cancel) { uni.showToast({ title: '你拒绝了授权，无法获得周边信息', icon: 'none', duration: 1000 }) } } }); }, toLocation:function(obj){ // 改变地图中心位置 mapCtx.moveToLocation(obj) // 移动标记点并添加动画效果 mapCtx.translateMarker({ markerId: 1, autoRotate: true, duration: 100, destination: { latitude:obj.latitude, longitude:obj.longitude, }, animationEnd() { console.log('animation end') } }) }, } } .page-section-gap{ box-sizing: border-box; padding: 0 30rpx; } .page-body-button { margin-bottom: 30rpx; }

效果 在这里插入图片描述 （ps：注意获取定位要设置权限 开启位置接口配置） 在这里插入图片描述 在进一步实现点击地图上的 poi点事位置标记点移动到该点 利用到 map的 bindpoitap事件 点击地图poi点时触发，（ps：此事件需要在真机调试下查看效果）

var self ,mapCtx export default { onLoad() { self = this // 获取当前map mapCtx = wx.createMapContext('myMap') self.getAuthorizeInfo() }, //相关配置参数 data() { return { // 初始化的中心位置 latitude: 23.099994, longitude: 113.324520, // 标记点 markers: [{ id: 1, latitude: 23.099994, longitude: 113.324520, name: 'T.I.T 创意园' }], } }, methods:{ // 位置授权 getAuthorizeInfo(){ uni.authorize({ scope: 'scope.userLocation', success() { // 允许授权 self.getLocationInfo(); }, fail(){ // 拒绝授权 self.openConfirm(); console.log("你拒绝了授权，无法获得周边信息") } }) }, // 获取地理位置 getLocationInfo(){ uni.getLocation({ type: 'wgs84', success (res) { console.log(res,"当前位置"); // 移动到当前位置 self.toLocation(res) self.latitude = res.latitude; self.longitude = res.longitude; } }); }, // 再次获取授权 // 当用户第一次拒绝后再次请求授权 openConfirm(){ uni.showModal({ title: '请求授权当前位置', content: '需要获取您的地理位置，请确认授权', success: (res)=> { if (res.confirm) { uni.openSetting();// 打开地图权限设置 } else if (res.cancel) { uni.showToast({ title: '你拒绝了授权，无法获得周边信息', icon: 'none', duration: 1000 }) } } }); }, toLocation:function(obj){ // 改变地图中心位置 mapCtx.moveToLocation(obj) // 移动标记点并添加动画效果 mapCtx.translateMarker({ markerId: 1, autoRotate: true, duration: 100, destination: { latitude:obj.latitude, longitude:obj.longitude, }, animationEnd() { console.log('animation end') } }) }, // poitap: function(e){ console.log(e,"poitap") var obj = e.detail self.toLocation(obj) }, } } .page-section-gap{ box-sizing: border-box; padding: 0 30rpx; } .page-body-button { margin-bottom: 30rpx; }

实现搜索功能 此功能需要用到 腾讯地图 提供的 api（这个功能很多 也比较好用 在这里就不详细列举了 管兴趣的可以看一下 腾讯地图） 1，申请开发者密钥（key）：申请秘钥 2，开通webserviceAPI服务：控制台 ->key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存 (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限) 在这里插入图片描述 3，下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2 导入SDK 下载后解压，将里面的 qqmap-wx-jssdk.js 文件拷贝到项目里面。然后在需要的页面导入。

var QQMapWX = require('../../common/qqmap/qqmap-wx-jssdk.min.js');

引用方法

const QQMapWX = new qqmapsdk({ key: '在腾讯位置服务申请的key' });

我这里只用了 关键词搜索的 方法 search 当然方法还有很对看自己的具体需求(微信小程序JavaScript SDK 方法介绍) 下面上完整代码

{{item.title}} // 引入SDK核心类 var QQMapWX = require('../../common/qqmap/qqmap-wx-jssdk.min.js'); var qqmapsdk; var self; export default { data() { return { data:[], IsOption:false, searchKey:"", latitude: '', longitude:'', markers: [{ id: 1, latitude: 23.099994, longitude: 113.324520, name: 'T.I.T 创意园' }], covers: [{ latitude: 23.099994, longitude: 113.344520, iconPath: '/image/location.png' }, { latitude: 23.099994, longitude: 113.304520, iconPath: '/image/location.png' }], } }, onLoad() { self = this self.mapCtx = wx.createMapContext('myMap') self.getAuthorizeInfo() // 实例化API核心类 qqmapsdk = new QQMapWX({ key: 'WS3BZ-QUFEO-TNEW5-S2RZ6-QVQI6-PJFWY' }); }, methods: { bindChange:function(e){ console.log(e) }, // 搜索框 search: function(e){ console.log(e) self.searchKey = e.detail.value var location = self.latitude+","+ self.longitude self.mapSearch(self.searchKey,location).then(res => { self.data = res.data if(self.searchKey && self.data.length){ self.IsOption = true }else{ self.IsOption = false } },error => { // self.$api.msg('请求失败') // console.log(error,"aaaaaaaaaaa"); }) }, tapOption:function(item){ self.searchKey = item.title self.IsOption = false self.data = [] var obj = {} obj.latitude = item.location.lat; obj.longitude = item.location.lng; // console.log(item,"danji",obj) self.toLocation(obj) }, toLocation:function(obj){ self.mapCtx.moveToLocation(obj) self.mapCtx.translateMarker({ markerId: 1, autoRotate: true, duration: 100, destination: { latitude:obj.latitude, longitude:obj.longitude, }, animationEnd() { console.log('animation end') } }) }, // mapSearch:function(keyword,location){ console.log(keyword,location,"keyword,location") let promise = new Promise(function(resolve, reject) { // 调用接口 qqmapsdk.search({ keyword: keyword,//搜索关键词 location:location , //设置周边搜索中心点 success: function (res) { resolve(res) }, fail: function (res) { reject(res) } }); }) return promise }, // 位置授权 getAuthorizeInfo(){ uni.authorize({ scope: 'scope.userLocation', success() { // 允许授权 self.getLocationInfo(); }, fail(){ // 拒绝授权 self.openConfirm(); console.log("你拒绝了授权，无法获得周边信息") } }) }, // 获取地理位置 getLocationInfo(){ uni.getLocation({ type: 'wgs84', success (res) { console.log(res,"当前位置"); self.toLocation(res) self.latitude = res.latitude; self.longitude = res.longitude; // uni.openLocation({ // latitude: latitude, // longitude: longitude, // success: function () { // console.log('success'); // } // }) } }); }, // 再次获取授权 // 当用户第一次拒绝后再次请求授权 openConfirm(){ uni.showModal({ title: '请求授权当前位置', content: '需要获取您的地理位置，请确认授权', success: (res)=> { if (res.confirm) { uni.openSetting();// 打开地图权限设置 } else if (res.cancel) { uni.showToast({ title: '你拒绝了授权，无法获得周边信息', icon: 'none', duration: 1000 }) } } }); }, poitap: function(e){ console.log(e,"poitap") var obj = e.detail self.searchKey = obj.name // this.$api.msg(e) self.toLocation(obj) }, getCenterLocation: function () { this.mapCtx.getCenterLocation({ success: function(res){ console.log(res.longitude) console.log(res.latitude) } }) }, // 下一步 Next:function(){ uni.navigateTo({ url: './addFishpond2' }) }, // 取消删除 Cancel:function(){ }, } } .content { background-color: #F1F1F1; overflow: hidden; min-height: 100vh; color: #646464; font-size:40rpx ; } .top>input{ height: 88rpx; width: 524rpx; margin: 40rpx auto 0; padding:0 40rpx; border: solid 2rpx #BEBEBE; } .option{ max-height: 300rpx; width: 100%; line-height: 60rpx; position: fixed; top: 128rpx; z-index: 99999; } .column_item{ padding:0 40rpx; height: 60rpx; width: 524rpx; overflow: hidden; margin:0rpx auto; background-color: #fff; text-overflow: ellipsis; white-space: nowrap; } .column_item:active{ background-color: #8F8F94; } .page-section-gap{ box-sizing: border-box; /* padding: 0 30rpx; */ margin: 30rpx auto; width: 600rpx; }

效果 在这里插入图片描述 实现了简答的搜索 感觉搜索方面不太智能 有好的建议的地方大家可以交流一下



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3