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

最新推荐文章于 2024-04-12 12:04:08 发布

进阶的巨人001

最新推荐文章于 2024-04-12 12:04:08 发布

阅读量7.2k

点赞数 5

文章标签：微信小程序腾讯位置服务

本文链接：https://blog.csdn.net/weixin_45389051/article/details/107026505

版权

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

主要用到了腾讯位置服务里面的微信小程序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.windowWidth
        var maph = res.windowHeight
        this.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
        })
      }
    })
  },
})