微信小程序实现指定景点周边的美食、酒店等搜索

最新推荐文章于 2024-06-21 11:09:36 发布

宸起

最新推荐文章于 2024-06-21 11:09:36 发布

阅读量9.1k

点赞数 7

分类专栏：小程序文章标签：微小程地周

本文链接：https://blog.csdn.net/qq_36262395/article/details/88561971

版权

小程序专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用腾讯地图位置服务微信小程序JavaScript SDK进行开发，包括申请开发密钥、地址解析及周边搜索功能实现，通过具体代码示例展示地图显示、地点搜索等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下为效果图，使用的是腾讯地图位置服务微信小程序JavaScript SDK，首先要申请腾讯地图位置服务的开发密钥，然后进行开发。

wxml：

<view style='width:100%;height:{{height}}px;'>
  <map id="map" longitude='{{poi.longitude}}' latitude='{{poi.latitude}}' scale='16' markers='{{markers}}' style='width:100%;height:{{height}}px;' show-location bindmarkertap='gotoHere'></map>
  <view class='nav'>
    <button bindtap='search' data-type='酒店' class='nav-but'>酒店</button>
    <button bindtap='search' data-type='美食' class='nav-but'>美食</button>
    <button bindtap='search' data-type='书店' class='nav-but'>书店</button>
    <button bindtap='search' data-type='商城' class='nav-but'>商城</button>
  </view>
</view>
<view class='info'>
  <navigator wx:for="{{perimeter}}" url="../routes/routes?latitude={{startlat}}&&longitude={{startlng}}&&latitude2={{item.location.lat}}&&longitude2={{item.location.lng}}"  class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
      <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
        <view class="weui-media-box__title">{{item.title}}</view>
          <view class="weui-media-box__desc">位置：{{item.address}} </view> 
      </view>
  </navigator>
</view>

js页面的主要函数有两个，一个是将具体地址转为经纬度的地址解析函数；一个是根据指定经纬度以及关键词查找周边相关搜索。

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
var startlat;
var startlng;

Page({
  data: {
    height:"400",
    perimeter:[]
  },
  onLoad: function (options) {
    var address = options.address;
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'IBCBZ-XXXXXXXXXXXXXXXXXXXXX'
    });
    this.addressGeocoder(address);
  },
  search:function(e){
    var _this = this;
    var a = e.target.dataset.type;
    //console.log("a="+a);
    _this.nearby_search(a);
  },
  //根据地址转为经纬度
  addressGeocoder:function(address){
    var _this = this;
    qqmapsdk.geocoder({
      address:address,
      success:function(res){
        console.log("res="+res);
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        //根据地址解析在地图上标记解析地址位置
        _this.setData({
          markers:[{
            id:0,
            title:res.title,
            latitude:latitude,
            longitude:longitude,
            iconPath:'../../images/marker_checked.png',
            width:20,
            height:20
          }],
          poi:{
            latitude:latitude,
            longitude:longitude
          },
          startlat:latitude,
          startlng:longitude
        });
      },
      fail:function(error){
        console.error("error="+error);
      },
      complete:function(res){
        console.log("complete="+res);
      }
    })
  },
  //周边地点搜索
  nearby_search:function(keyword){
    var _this = this;
    qqmapsdk.search({
      keyword:keyword,
      location:_this.data.poi,
      success:function(res){
        var obj = JSON.stringify(res);
        console.log("obj="+obj);
        var mks = [];
        for(var i = 0; i <res.data.length; i++){
          mks.push({
            title:res.data[i].location.lat,
            id:res.data[i].id,
            latitude:res.data[i].location.lat,
            longitude:res.data[i].location.lng,
            iconPath:"../../images/marker.png",
            width:20,
            height:20,
            callout:{
              content: res.data[i].title,
              color:'#000',
              display:'ALWAYS'
            }
          })
        }
        _this.setData({
          //markers:mks
          markers:mks,
          perimeter:res.data
        })
      },
      fail:function(res){
        console.log("fail="+res);
      },
      complete:function(res){
        console.log("complete="+res);
      }

    });
  },
  gotoHere:function(res){
    var obj = JSON.stringify(res);
    console.log("gotoHere="+obj);
  },
  onShow: function () {

  }
})

暂告一段落，下一篇写指定景点到所选择的的周边的导航。。。