微信小程序 微信小程序地图搜索、地图搜索点点击出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