实现效果：根据楼盘名称实现地图定位、周边搜索；
代码：
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文件 官网下载地址/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./miniprogram/dev/component/map.html#map
微信小程序开发——地图 API（腾讯地图api大全 详细api）/Qjy_985211/article/details/88107733
微信官网api：/qqmap_wx_jssdk/method-getsuggestion.html
微信小程序----map组件实现检索【定位位置】周边的POI：/dalulu/p/9443564.html
微信小程序获取地理位置名称，附近地理信息，根据经纬度距离计算等问题详解/zhongguohaoshaonian/article/details/80870415
微信小程序 腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置：/summer_ck/article/details/89456675
微信小程序地图搜索：/summer_ck/article/details/89472134
