微信小程序之地图关键词输入提示，点击地点打开相应位置

运行效果

​

​功能介绍

本案例采用腾讯位置服务中关键词输入提示方法，对用户输入的关键词进行补齐，并弹出返回匹配度高的结果，用户点击任意一个结果，打开此位置，之后可以借助于微信内置地图来实现导航等后续功能。

主要代码

wxml页面

框架页面中主要包含一个全屏显示的地图组件、一个位于顶部的输入框组件和位置呈现区域的view组件

      {{item.title}}      {{item.addr}}

wxss页面

样式页面中设置地图百分百显示，同时将整个page页面设置为相对定位，输入框和内容呈现区域为绝对定位。

map{  width:100%;  height:100vh}page{  position:relative}input{  position: absolute;  top:20rpx;  left:25rpx;  width:700rpx;  height:100rpx;  border:1px solid #6495ED;  border-radius:50rpx;  background:#fff;}.keywords{  position: absolute;  top:120rpx;  left:25rpx;  width:660rpx;  padding:20rpx;  border:1px solid #6495ED;  background: #fff}

js页面

js页面中实现搜索提示功能基本上使用的是官方给定的代码，其中设置了下关键词和城市名限制

 getsuggest: function (e) {    var _this = this;    qqmapsdk.getSuggestion({      keyword: e.detail.value ? e.detail.value : _this.data.city,       region:_this.data.city,       success: function (res) {        var sug = [];        for (var i = 0; i < res.data.length; i++) {          sug.push({             title: res.data[i].title,            id: res.data[i].id,            addr: res.data[i].address,            city: res.data[i].city,            district: res.data[i].district,            latitude: res.data[i].location.lat,            longitude: res.data[i].location.lng          });        }        _this.setData({           suggestion: sug        });      },      fail: function (error) {        console.error(error);      },      complete: function (res) {        console.log(res);      }    });  },  openThis:function(e){    var longitude = e.target.dataset.longitude    var latitude = e.target.dataset.latitude    wx.openLocation({      latitude: latitude,      longitude: longitude,    })  },

如需源码，关注下方公众号，后台回复“地图518”，感谢阅读，感谢关注