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

以下为效果图，使用的是腾讯地图位置服务微信小程序JavaScript SDK，首先要申请腾讯地图位置服务的开发密钥，然后进行开发。

wxml：

  
  
    酒店
    美食
    书店
    商城
  


  
      
        {{item.title}}
          位置：{{item.address}}  
      
  

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);
  },
  search:function(e){
    var _this = this;
    var a = e.target.dataset.type;
    //console.log("a="+a);
    _this.nearby_search(a);
  },
  //根据地址转为经纬度
  addressGeocoder:function(address){
    var _this = this;
    qqmapsdk.geocoder({
      address:address,
      success:function(res){
        console.log("res="+res);
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        //根据地址解析在地图上标记解析地址位置
        _this.setData({
          markers:[{
            id:0,
            title:res.title,
            latitude:latitude,
            longitude:longitude,
            iconPath:'../../images/marker_checked.png',
            width:20,
            height:20
          }],
          poi:{
            latitude:latitude,
            longitude:longitude
          },
          startlat:latitude,
          startlng:longitude
        });
      },
      fail:function(error){
        console.error("error="+error);
      },
      complete:function(res){
        console.log("complete="+res);
      }
    })
  },
  //周边地点搜索
  nearby_search:function(keyword){
    var _this = this;
    qqmapsdk.search({
      keyword:keyword,
      location:_this.data.poi,
      success:function(res){
        var obj = JSON.stringify(res);
        console.log("obj="+obj);
        var mks = [];
        for(var i = 0; i