微信小程序实现附近吃喝玩乐功能-基于百度地图服务搜索附近POI

利用百度地图API实现一个简单的小程序附近POI定位。

map.js
bmap-wx.min.js文件下载网址
下载
这里基本是基于官方demo，下载地址压缩包里也有几个demo可以参考学习。
图片资源也在压缩包里。

// 引用百度地图微信小程序JSAPI模块
var bmap = require('../../utils/bmap-wx.min.js');
var wxMarkerData = [];
Page({data: {markers: [],latitude: '',longitude: '',placeData: {},query:'酒店'},makertap: function (e) {var that = this;var id = e.markerId;that.showSearchInfo(wxMarkerData, id);that.changeMarkerColor(wxMarkerData, id);},button:function (e) {this.data.query = e.currentTarget.dataset['index'];console.log(this.data.query);this.onLoad();},onLoad: function () {var that = this;var query = this.data.query;// 新建百度地图对象var BMap = new bmap.BMapWX({ak: 'SHhILCwBcfqiCqwEL1MpqeRS5qwS5uoW'});var fail = function (data) {console.log(data)};var success = function (data) {wxMarkerData = data.wxMarkerData;that.setData({markers: wxMarkerData});that.setData({latitude: wxMarkerData[0].latitude});that.setData({longitude: wxMarkerData[0].longitude});}// 发起POI检索请求BMap.search({"query": query,fail: fail,success: success,// 此处需要在相应路径放置图片文件iconPath: '../../img/marker_red.png',// 此处需要在相应路径放置图片文件iconTapPath: '../../img/marker_red.png'});},showSearchInfo: function (data, i) {console.log(data)var that = this;that.setData({placeData: {title: '名称：' + data[i].title + '\n',address: '地址：' + data[i].address + '\n',telephone: '电话：' + data[i].telephone}});},changeMarkerColor: function (data, i) {var that = this;var markers = [];for (var j = 0; j < data.length; j++) {if (j == i) {// 此处需要在相应路径放置图片文件data[j].iconPath = "../../img/marker_yellow.png";} else {// 此处需要在相应路径放置图片文件data[j].iconPath = "../../img/marker_red.png";}markers[j](data[j]);}that.setData({markers: markers});}
})

map.wxml
静态页面，利用data-index简单的传一个值，再从js里把这个值赋给“query”，从而实现查询条件变更。

<view class="map_container"><map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>
<button bindtap="button" type="default" plain="true" data-index="美食">美食</button>
<button bindtap="button" type="default" plain="true" data-index="酒店">酒店</button>
<button bindtap="button" type="default" plain="true" data-index="购物">购物</button>
<button bindtap="button" type="default" plain="true" data-index="生活服务">生活服务</button>
<view class="place_info"><text>{{placeData.title}}</text><text>{{placeData.address}}</text><text>{{placeData.telephone}}</text>
</view>

map.wxss
简单写个样式，能出效果就可以了。

.map_container{height: 450px;width: 100%;
}.map {height: 100%;width: 100%;
}.place_info {padding: 0 5px;
}

说一下这里踩的坑，如果你的小程序提示你百度地图的地址不在合法域名列表中）。

上线情况下：你需要在https://mp.weixin.qq.com/wxamp/wadevelopcode/的服务端域名里配置https://api.map.baidu.com;使他成为合法域名。
本地情况下：在本地情况下localhost不应该也不能配置在服务端域名上，那么你就需要开启这一项，跳过校验。

如果在电脑可以运行，手机地图却出现蓝屏的情况，有可能是因为手机端的调试基础库问题。把运行环境的调试基础库推送即可解决。

微信小程序实现附近吃喝玩乐功能-基于百度地图服务搜索附近POI相关推荐

解决通过微信小程序获取的定位坐标在百度地图渲染误差过大问题
微信小程序可以获取两种坐标系的经纬度,分别为WGS84(大地坐标系)和GCJ02(国测局坐标系)而百度却是在其基础上进行加密形成了自己的一套坐标系bd09(百度坐标系),如果直接用微信小程序获取的经纬 ...
借鉴华为HiLink实现微信小程序智能配网功能
借鉴华为HiLink实现微信小程序智能配网功能微信小程序介绍微信公众号智能配网 Smartconfig实现原理 Smartconfig技术的弊端 AP配网技术的出现微信小程序智能配网模块端设置 ...
微信小程序连接物联网（三）:微信小程序远程遥控宿舍开门基于NodeMCU通过MQTT协议连接阿里云物联网平台
索引这是用微信小程序遥控开门的系列文章,具体微信小程序连接物联网的代码在第三章提及. 微信小程序连接物联网(一):初始化ESP8266 NodeMCU 微信小程序连接物联网(二):NodeMCU L ...
nodejs android 推送,利用Nodejs怎么实现一个微信小程序消息推送功能
利用Nodejs怎么实现一个微信小程序消息推送功能发布时间:2021-01-20 13:55:29 来源:亿速云阅读:92 作者:Leah 今天就跟大家聊聊有关利用Nodejs怎么实现一个微信小程 ...
php 微信小程序循环多选,微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下代码: {{num + 1}}/{{quesyion.length}}{{question[num][0]}} A {{qu ...
如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...
微信小程序可以实现很多功能
微信小程序可以实现很多功能,今天就教大家如何利用小程序插件来实现这些功能: 1.直播你可以在「上线了」选择一个电商(或超级云名片-电商版)小程序模板,在"应用中心"里添加小程序 ...
微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...
微信小程序实现替换logo功能
1.背景产品觉得用公司logo生成的的二维码太丑觉得橘黄色和黑色不搭配,希望替换logo,在此之前,我也是没有做过这个功能的,于是我查阅了大量资料.加上自己的代码,实现了这个功能.实现的效果如下 ...

微信小程序实现附近吃喝玩乐功能-基于百度地图服务搜索附近POI

微信小程序实现附近吃喝玩乐功能-基于百度地图服务搜索附近POI相关推荐

最新文章

热门文章