微信小程序实现搜索指定景点周边美食、酒店_微信小程序高德选点 - CSDN文库

32 浏览量更新于2023-05-04 评论 4 收藏 50KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

本文为大家分享了微信小程序实现指定景点周边的美食、酒店等搜索，供大家参考，具体内容如下

以下为效果图，使用的是腾讯地图位置服务微信小程序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);

},

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38503483

粉丝: 8
资源: 942

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈