微信小程序map组件查找周围各种场所(通过腾讯位置服务)

废话不多说，直接写咋实现

主要用到了腾讯位置服务里面的微信小程序JavaScript SDK,你得先申请一个开发者密钥，这里就不多说了

实现效果如下,这里面是搜索周围的餐厅

首先wxml代码

<map id="map" bindcontroltap="bindControlTap"
bindregionchange="bindRegionChange" longitude="{{longitude}}"
latitude="{{latitude}}" markers="{{markers}}" controls="{{controls}}" style="width:{{mapw}};height:{{maph}}" scale="{{scale}}" show-location>
</map>bindControlTap事件:主要是点击左下角那个拇指，回到最初的地点
bindRegionChange事件:主要是当你滑动的时候，餐厅也随之发生变化
longitude:经度
latitude:纬度
markers:就是图上的餐厅图片
controls:就是我那个左下角的手指，可以添加多个，位置更改即可
mapw:屏幕宽度
maph:屏幕高度
scale:放大倍数
show-location:展示当前定位点

js代码就得多一点了,首先你要在腾讯位置服务里面下载微信小程序JavaScriptSDK，然后引入qqmap-wx-jssdk.js文件

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({data:{latitude:23.099994,longitude:113.324520,mapw:'100%',maph:'0',scale:'18',markers:[],},mapCtx: null,onLoad: function () {// 实例化API核心类qqmapsdk = new QQMapWX({key: ''  //你腾讯位置服务的key});this.mapCtx = wx.createMapContext('map')wx.getSystemInfo({success:res=>{var mapw = res.windowWidthvar maph = res.windowHeightthis.setData({maph: maph + 'px',controls:[{id:1,iconPath:'/images/shouzhi.png',position:{left:10,top:maph-50,width:30,height:20},clickable:true //可以点击}]})}})},onReady:function(){wx.getLocation({type:'gcj02',success:res=>{console.log(res)this.setData({longitude:res.longitude,latitude:res.latitude})this.getFood(res.longitude,res.latitude)}})},//点击回到初始位置bindControlTap(e){console.log(e.controlId)if(e.controlId ===1){this.mapCtx.moveToLocation()}},//滑动获取周围的餐厅bindRegionChange(e){if(e.type ==='end'){this.mapCtx.getCenterLocation({success:res=>{this.getFood(res.longitude,res.latitude)}})}},getFood: function (longitude, latitude){qqmapsdk.search({keyword:'餐厅',location:{longitude: longitude,latitude: latitude},success:res=>{var mark = []for(let i in res.data){mark.push({iconPath:'/images/rice.png',title: res.data[i].title,id:i,longitude:res.data[i].location.lng,latitude: res.data[i].location.lat,})}mark.push({iconPath: '/images/laozhan.png',id: res.data.length,longitude: longitude,latitude: latitude,})this.setData({markers:mark})}})},
})

微信小程序map组件查找周围各种场所(通过腾讯位置服务)相关推荐

微信小程序，将经纬度转化为城市地区（腾讯位置服务）
第一步小程序中需要通过getLocation方法获取地理位置 wx.getLocation({type: 'wgs84',success (res) {const latitude = res.la ...
微信小程序--map组件视图无法更新的问题
在使用微信小程序 map组件的时候,会有一个小问题.当出现markers是一个数组,在切换数据的时候,页面会残留上次留下来的markers. 在js中使用setData更新markers数据后,地图上 ...
微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
微信小程序----map组件实现检索【定位位置】周边的POI
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显 ...
微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）
效果图实现原理采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city ...
微信小程序map组件点聚合初次使用的坑
有个项目一直有个功能,地图上标注车站,但是点过多时需要点聚合功能,map组件和腾讯地图小程序端并不能实现这个功能,除了webview,好像没有别的办法.终于9月份官方更新了聚合功能,,, 看文档使用方 ...
微信小程序map组件点击不同的marker跳转到不同的页面
"wxml页面" 在map组件中添加触发事件:bindmarkertap="markertap" "js页面" 在data中,为marker ...
微信小程序map组件展示当前位置修改标记点图标
当前位置展示: <view><map id="myMap" show-location class="container" style=&qu ...

微信小程序map组件查找周围各种场所(通过腾讯位置服务)

微信小程序map组件查找周围各种场所(通过腾讯位置服务)相关推荐

最新文章

热门文章