小程序展示附近的景点,酒店等信息

有时候会用到像下图这样的在某个页面中用map组件展示附近的一些景点,酒店等

关键代码

1.map组件

官网介绍

<map longitude="{{ longitude}}" latitude="{{ latitude}}" scale="8"  markers="{{markers}}"  style="width: 100%; height: 500px;"></map>

这里主要用到这几个属性

longitude	中心经度
latitude	中心维度
scale	缩放级别
markers	标记点

markers数组对象中包含内容

longitude	经度
latitude	维度
iconPath	显示的图标
title	标注点名

2.获取当前位置

wx.getLocation
拿到当前的经纬度,用于

• 提供map组件当前的中心维度
• 为后面的推荐提供范围

wx.getLocation({
 type: 'wgs84',
 success (res) {
  that.setData({
         latitude : res.latitude,
         longitude : res.longitude
      })
 }
})

3.换取推荐

去微信小程序JavaScript SDK上申请关键的开发密钥和下载所需要的js文件

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
//官网下载的jsSDK文件,地址:http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip

// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填,腾讯位置服务官网上的key
});



 qqmapsdk.getSuggestion({
        //获取输入框值并设置keyword参数
        keyword: '景区', //用户输入的关键词，可设置固定值,如keyword:'KFC'
        location:res.latitude+','+res.longitude,//按官方要求将获取的当前经纬度转换成"维度,精度的格式"
        success: function(res) {//搜索成功后的回调
          console.log(res);
          var sug = [];
          for (var i = 0; i < res.data.length; i++) {
            sug.push({ // 获取返回结果，放到sug数组中
              title: res.data[i].title,
              iconPath: "../../utils/ding.png",
              latitude: res.data[i].location.lat,
              longitude: res.data[i].location.lng
            });
          }
          that.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
            markers: sug
          });
        },
        fail: function(error) {
          console.error(error);
        },
        complete: function(res) {
          console.log(res);
        }
      });

完整代码

wxml:

<map id="map" longitude="{{ longitude}}" latitude="{{ latitude}}" scale="8"  markers="{{markers}}"  style="width: 100%; height: 500px;"></map>

js:

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
// 引入SDK核心类
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥' // 必填,腾讯位置服务官网上的key
});
Page({
  data: {
    markers:[],
    latitude:'',
    longitude:''
  },
onLoad(){
  var that=this
  wx.getLocation({//获取当前位置,用于展示视图中心及推荐范围
    type: 'wgs84',
    success (res) {
      that.setData({
         latitude : res.latitude,
         longitude : res.longitude
      })
      qqmapsdk.getSuggestion({
        //获取输入框值并设置keyword参数
        keyword: '景区', //用户输入的关键词，可设置固定值,如keyword:'KFC'
        location:res.latitude+','+res.longitude,
        success: function(res) {//搜索成功后的回调
          console.log(res);
          var sug = [];
          for (var i = 0; i < res.data.length; i++) {
            sug.push({ // 获取返回结果，放到sug数组中
              title: res.data[i].title,
              iconPath: "../../utils/ding.png",
              latitude: res.data[i].location.lat,
              longitude: res.data[i].location.lng
            });
          }
          that.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
            markers: sug
          });
        },
        fail: function(error) {
          console.error(error);
        },
        complete: function(res) {
          console.log(res);
        }
      });
    }
   })
},

})