微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明

实现效果：根据楼盘名称实现地图定位、周边搜索；

代码：
html

<view class="mapinfo"><view class="mapbd"><map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" enable-scroll="{{enablescroll}}"         markers="{{markers}}" /> </view><scroll-view class="mapbombox" scroll-x="{{true}}"><view class="mapiconbox" wx:for="{{mapiconlist}}" wx:key="index" data-txt="{{item.icontxt}}" bindtap="nearby_search"><image mode="widthFix" src="{{item.imgpath}}" class="mapicon" /><view class="mapicontxt">{{item.icontxt}}</view></view></scroll-view>
</view>

js:（需要下载地图sdk.js文件官网下载地址https://lbs.qq.com/qqmap_wx_jssdk/index.html 以及 key

// pages/mapinfo/mapinfo.js
// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;Page({/*** 页面的初始数据*/data: {latitude: 39.9167,longitude: 116.3833,mapheight: '600',enablescroll: true,selcity: '',markers: [{iconPath: "../../images/placeico.png",id: 0,latitude: 39.9167,longitude: 116.3833,width: 28,height: 40}],mapiconlist: [{imgpath: "../../images/map-bus.png",icontxt: "公交"}, {imgpath: "../../images/map-subway.png",icontxt: "地铁"}, {imgpath: "../../images/map-hospital.png",icontxt: "医院"}, {imgpath: "../../images/map-bank.png",icontxt: "银行"}, {imgpath: "../../images/map-shopping.png",icontxt: "购物"}, {imgpath: "../../images/map-food.png",icontxt: "餐饮"}, {imgpath: "../../images/map-school.png",icontxt: "学校"}, {imgpath: "../../images/map-hotel.png",icontxt: "酒店"}, {imgpath: "../../images/map-enter.png",icontxt: "娱乐"}]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 实例化API核心类qqmapsdk = new QQMapWX({key: 'K7EBZ-DEH6F-YSOJA-NZSJL-WUT43-SLFBE'});this.getsuggest();wx.getSystemInfo({success: (res) => {this.setData({mapheight: res.windowHeight})// console.log(res.model)// console.log(res.pixelRatio)// console.log(res.windowWidth)console.log(this.data.mapheight);// console.log(res.language)// console.log(res.version)// console.log(res.platform)}})},getsuggest: function (e) {var _this = this;//调用关键词提示接口qqmapsdk.getSuggestion({//获取输入框值并设置keyword参数// keyword: e.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'keyword: '首尔甜城',// region: '上海', //设置城市名，限制关键词所示的地域范围，非必填参数page_size: 5,success: (res) => { //搜索成功后的回调// console.log(res);let sug = [];sug.push({ // 获取返回结果，放到sug数组中iconPath: "../../images/placeico.png",width: 28,height: 40,title: res.data[0].title,id: res.data[0].id,addr: res.data[0].address,city: res.data[0].city,district: res.data[0].district,latitude: res.data[0].location.lat,longitude: res.data[0].location.lng,callout: {content: res.data[0].title,color: '#fff',fontSize: 14,borderRadius: 5,display: 'none',bgColor: '#818080',borderColor: '#818080',textAlign: "center",padding: 10,// borderWidth: 1,// borderColor: "#CCC",}});this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示latitude: sug[0].latitude,longitude: sug[0].longitude,markers: sug,selcity: res.data[0].district});console.log(res.data[0].district);// console.log(sug[0].latitude);},fail: function (error) {console.error(error + "失败");        },complete: function (res) {// console.log(res);}});},// 事件触发，调用接口nearby_search: function (e) {var _this = this;let keyword = e.currentTarget.dataset.txt;// console.log(e);// 调用接口qqmapsdk.search({keyword: keyword, //搜索关键词boundary: 'nearby(' + this.data.latitude + ',' + this.data.longitude + ', 1000)',region: this.data.selcity,// orderby: _distance, //支持按距离由近到远排序auto_extend: 0,page_size: 8,location: this.data.latitude + ',' + this.data.longitude, //设置周边搜索中心点success: (res) => { //搜索成功后的回调let mks = []for (let i = 0; i < res.data.length; i++) {mks.push({ // 获取返回结果，放到mks数组中title: res.data[i].title,id: res.data[i].id,latitude: res.data[i].location.lat,longitude: res.data[i].location.lng,iconPath: "../../images/placeico.png", //图标路径width: 28,height: 40,callout: {content: res.data[i].title,color: '#fff',fontSize: 14,borderRadius: 5,display: 'none',bgColor: '#818080',borderColor: '#818080',textAlign: "center",padding: 10,// borderWidth: 1,// borderColor: "#CCC",}})}if (mks.length > 0) {this.setData({ //设置markers属性，将搜索结果显示在地图中markers: mks})} else {// console.log('kong');wx.showToast({title: "当前区域内未找到",icon: 'none',})}// console.log(res);// console.log(this.data.latitude + ',' + this.data.longitude);},fail: function (res) {console.log(res);},complete: function (res) {console.log(res);}});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},})

css

.mapinfo{position: relative;width: 100%;height: 100vh;overflow: hidden;.mapbd {position: relative;width: 100%;height: 100vh;#map {width: 100%;height: 100%;}}.mapbombox{position: fixed;left: 0;bottom:0;width: 100%;height: 100rpx;    z-index:99;background:rgba(0,0,0,0.5);white-space: nowrap;.mapiconbox{position: relative;width: 100rpx;height: 100%;display: inline-block;.mapicon{width: 50rpx;height: auto;display: block;margin:16rpx auto 0;}.mapicontxt{font-size: 20rpx;line-height: 34rpx;text-align: center;color: #fff;}}}
}

很遗憾的是没有做出来地图可视区内周边搜索，boundary: ‘nearby(’ + this.data.latitude + ‘,’ + this.data.longitude + ‘, 1000)’,好像并没有控制在1000米范围内，希望有大佬看到还能提点一二。。

以下是相关网站链接供参考：

微信小程序官网地图api详细介绍：https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map

微信小程序开发——地图 API（腾讯地图api大全详细api）https://blog.csdn.net/Qjy_985211/article/details/88107733

微信官网api：https://lbs.qq.com/qqmap_wx_jssdk/method-getsuggestion.html

微信小程序----map组件实现检索【定位位置】周边的POI：https://www.cnblogs.com/dalulu/p/9443564.html

微信小程序获取地理位置名称，附近地理信息，根据经纬度距离计算等问题详解https://blog.csdn.net/zhongguohaoshaonian/article/details/80870415

微信小程序腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置：https://blog.csdn.net/summer_ck/article/details/89456675

微信小程序地图搜索：https://blog.csdn.net/summer_ck/article/details/89472134

微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明相关推荐

微信小程序--放入个性化手绘地图具体步骤（腾讯地图）
微信小程序–放入个性化手绘地图具体步骤(腾讯地图) 前言:小程序中想要实现个性化手绘地图需要通过H5嵌入的模式进行实现. 1.首先需要一个腾讯地图的账号(微信登录即可),然后选择个性化地图进入(htt ...
【微信小程序】腾讯位置服务地图选点服务示例
插件添加 1.插件申请接入: 在腾讯公众平台中, "微信小程序官方后台-设置-第三方服务-插件管理" 里点击 "添加插件",搜索 "腾讯位置服务地图选 ...
uni-app的列表搜索框_微信怎么搜索小程序？小程序能有什么用？
微信小程序发布三年多,如今很多人的日常生活已经离不开它.不过新手常常会遇到这样的情况:使用过某个小程序后,找不到它了:想要再次使用,不知道上哪儿去找.所以下面就跟大家科普下如何找到小程序,以及如何搜索 ...
微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能
微信小程序搜索,搜索历史,清除搜索历史,以及点击搜索历史实现搜索功能热搜内容一般从接口遍历的,实现方法基本和搜索历史差不多 wxml页面 <view class="search-he ...
微信小程序使用腾讯位置服务地图选点实现地址的选取|微信小程序腾讯位置服务地图选点请求来源未被授权
效果图首先要在微信开放平台的小程序里添加插件具体配置,可以参考官方文档腾讯位置服务地图选点 | 小程序插件 | 微信公众平台 (qq.com) 同时还要申请接口的权限,不然小程序上线的时候不能 ...
微信小程序流量主被封和暂停搜索？
9月26号毫无征兆的收到微信广告助手的通知: 然后进入小程序后台,提示如下: 小程序广告组件关闭原因: 流量主通过违法违规等不正常手段获取流量,包括但不限于通过头像.名称.简介混淆正常搜索结果,影响用 ...
微信小程序实时定位（腾讯地图）
微信小程序实时获取地理位置-腾讯地图微信小程序-获取当前城市位置: 一. 我用的腾讯定位服务 https://lbs.qq.com/ 打开之后点击控制台 2.我们创建自己的密匙key 3.下载微信小 ...
微信小程序——添加地图、地图上打点、自定义地图
目录 1.摘要 1.1 开发工具 1.2 开发框架 1.3 版本号 2. 添加地图 3. 地图打点 4. 个性化地图 4.1 申请开通个性化地图能力 4.2 添加小程序个性地图 4.3 自定义地图 1 ...
小程序搜索框_微信怎么搜索小程序？小程序能有什么用？
微信小程序已经发布了三年多,现在很多人在日常生活中离不开它.但是,新手经常会遇到这种情况:使用小程序后,他们找不到它:如果他们想再次使用它,他们不知道在哪里可以找到它.因此,以下内容将告诉您如何查找小 ...

微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明

微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明相关推荐

最新文章

热门文章

微信小程序 微信小程序地图搜索、地图搜索点点击出callout气泡标题说明

微信小程序 微信小程序地图搜索、地图搜索点点击出callout气泡标题说明相关推荐

最新文章

热门文章

微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明

微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明相关推荐