微信小程序使用高德地图实现检索定位附近周边的POI功能示例

大家好，欢迎来到IT知识分享网。

1、效果图

2、 实现过程

 1、登录高德地图开发者平台 高德开放平台 | 高德地图API，申请接口Key

2、在高德开发平台下载微信小程序SDK，https://lbs.amap.com/api/wx/download

 解压下载的文件得到 amap-wx.js ，在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js 文件拷贝到 libs 的本地目录下。

3、微信小程序后台添加安全域名（这个必须设置，不然无法使用定位功能）

登录微信公众平台，在 “设置” → “开发设置” 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去，如下图所示：

  4、具体代码

<template> <view class="content"> <!-- <view class="btns"> <view @click="back">取 消</view> <view @click="getCurrentLocation">获取当前地址</view> </view> --> <view class="inputCon"> <view class="searchView"> <text class="iconfont icon-sousuo" @click="searchFn"></text> <input type="text" placeholder="搜索地点" v-model="searchWords" confirm-type="search" @confirm="searchFn" /> <text @click="cancel">取消</text> </view> </view> <!-- 地图部分 --> <view class="content-map"> <map style="width: 100%;height: 100%;" v-if="mapFlafg" :latitude="latitude" :longitude="longitude" :markers="markers" @tap="tap" :scale="16" :title="title"/> </view> <!-- <view id="container"></view> --> <!-- 搜索框 --> <!-- 地点列表部分 --> <view class="list"> <view class="item" v-for="(add,index) in dataTips" :key="add.id" @click="select(add,index)" :class="selectIndex==index?'active':''"> <view class="name">{ 
  {add.name}}</view> <view class="address">{ 
  {add.district || ''}}{ 
  {add.address || ''}}</view> </view> </view> </view> </template> <script> // 引入高德地图api提供的微信小程序的接口 import amapFile from '@/packageB/pages/map/amap-wx.130.js'; // 创建地图 var myAmapFun = new amapFile.AMapWX({ key: '' }); //key值要申请为 去高德地图申请微信小程序的key // var myAmapFun = new amapFile.AMapWX({key: ''}); //key我的 export default { data() { return { mapFlafg:false, selectIndex: undefined, selectAddr: {}, searchWords: "", id: 1, // 使用 marker点击事件 需要填写id title: 'map', latitude: 39.91667, // 纬度 longitude: 116.41667, // 经度 markers: [{ latitude: 39.91667, // 纬度 longitude: 116.41667, // 经度 width: 30, height: 30, iconPath: '' // iconPath: '../../static/ditu.png' }], dataTips: [] } }, onLoad() { var self = this; uni.getLocation({ type: 'gcj02', success: function(res) { console.log(res, '当前地址定位'); if (res.errMsg == "getLocation:ok") { console.log(self.mark, 'onload里面看看'); self.longitude = res.longitude; self.latitude = res.latitude; self.$set(self.markers[0],"longitude",res.longitude); self.$set(self.markers[0],"latitude",res.latitude); self.mapFlafg=true; console.log(self.markers,"markers") // self.markers[0].longitude = res.longitude; // self.markers[0].latitude = res.latitude; } }, complete: () => { // 获取当前位置的地点列表 myAmapFun.getPoiAround({ location: self.longitude + ',' + self.latitude, success: (data) => { console.log("获取当前的列表", data); this.dataTips = data.poisData; }, fail: (info) => { console.log(info, '点击地图错误信息1') } }) } }); }, methods: { cancel() { if (this.searchWords) { this.searchWords = ""; myAmapFun.getPoiAround({ location: this.markers[0].longitude + ',' + this.markers[0].latitude, success: (data) => { console.log("获取当前的列表", data); this.$nextTick(() => { this.dataTips = data.poisData; }) }, fail: (info) => { console.log(info) } }) } }, reserGeo() { myAmapFun.getRegeo({ success: (data) => { console.log("getRegeo", data); }, fail: (info) => { console.log(info) } }) }, // 根据地址列表中选择某一个地点 select(add, index) { if (!add) { return; } this.selectIndex = index; var location = add.location.split(","); console.log(location, add, '列表地点的经纬度'); this.selectAddr = { address: add.pname ? (add.pname + add.cityname + add.adname) : (add.district + add .address), detailAddress: add.address, latitude: location[1], longitude: location[0] }; this.markers[0].latitude = +location[1]; this.markers[0].longitude = +location[0]; uni.setStorageSync("address", this.selectAddr.address); // 选择地点后，将选取的地点传递到前一个页面中 var pages = getCurrentPages(); // 获取所有的页面栈 var prevPage = pages[pages.length - 2]; // 找到上一个页面，注意是页面，如果是页面中有组件，则需要通过页面接受到数据后，再次往组件中传递 prevPage.$vm.userAddress.locationAddress = this.selectAddr.address; //在上一个页面中就可以用userAddress进行接收 prevPage.$vm.userAddress.detail = this.selectAddr.detailAddress; //在上一个页面中就可以用userAddress进行接收 prevPage.$vm.selectAddr = this.selectAddr; prevPage.$vm.address = { province: add.pname, city: add.cityname, district: add.adname, } uni.navigateBack({ delta: 1 }); }, // 在地图上点击进行选点，这个选点在地图缩放比例较大时无效，因为精读的问题。 tap(e) { console.log(e, '点击了地图'); var location = e.detail.longitude + ',' + e.detail.latitude myAmapFun.getRegeo({ location: location, success: (data) => { console.log("获取指定定位信息", data); this.selectAddr = { address: data[0].regeocodeData.formatted_address, latitude: e.detail.latitude, longitude: e.detail.longitude }; this.markers[0].latitude = data[0].latitude; this.markers[0].longitude = data[0].longitude; myAmapFun.getPoiAround({ location: data[0].longitude + ',' + data[0].latitude, success: (data) => { console.log("获取当前的列表", data); this.dataTips = data.poisData; }, fail: (info) => { console.log(info, '点击地图错误信息1') } }) }, fail: (info) => { console.log(info, '点击地图错误信息2'); } }) }, // 根据内容进行检索 searchFn() { console.log("根据地址检索", this.searchWords); myAmapFun.getInputtips({ keywords: this.searchWords, location: '', success: (data) => { console.log(111, data); if (data && data.tips) { this.dataTips = data.tips; } }, fail: data => { console.log(222, data); } }) }, // getCurrentLocation() { // let that = this // uni.getLocation({ // type: 'wgs84', // success: function(res) { // console.log(res, '当前地址定位'); // if (res.errMsg == "getLocation:ok") { // console.log(that.mark, 'onload里面看看'); // this.longitude = res.longitude; // this.latitude = res.latitude; // this.markers[0].longitude = res.longitude; // this.markers[0].latitude = res.latitude; // } // } // }); // }, } } </script> <style lang="scss" scoped> .btns { position: fixed; top: 0; left: 0; height: 260upx; width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); display: flex; align-items: center; justify-content: space-between; z-index: 10 !important; view { border-radius: 10%; margin: 100upx 24upx 0; font-size: 30upx; &:first-child { color: #fff; } &:last-child { width: 100upx; height: 60upx; line-height: 60upx; text-align: center; border-radius: 10upx; background: #20c295; color: #fff; } } } .content { // position: relative; height: 100vh; display: flex; flex-direction: column; .content-map { width: 100%; height: 50vh; } .list { // flex: 0 1 calc(50vh - 10upx); border-radius: 30rpx; background-color: #fff; // position: absolute; // bottom:-660rpx; height: calc(50vh - 10upx); overflow-y: auto; width: 100%; margin: 0upx auto 0; padding-bottom: 20upx; .item { border-bottom: 2upx solid #f3f3f3; padding: 0 30rpx; &:last-child { border: none; } .address { font-size: 22upx; color: #666; margin: 10upx 0; } .name { font-size: 30upx; color: #333; margin-top: 10upx; } &.active { .name { font-weight: bold; color: #E13500; } .address { color: #E13500; } } } } .inputCon { flex: 0 1 108rpx; width: 100%; background: #fff; // top: -60upx; // position: relative; z-index: 20; // height: 100upx; display: flex; align-items: center; justify-content: center; .searchView { width: 702upx; height: 60upx; display: flex; align-items: center; line-height: 60upx; border-radius: 40upx; padding: 0 30upx; box-sizing: border-box; background: #f3f3f3; font-size: 26upx; .iconfont { color: #666; margin-right: 20upx; } input { flex: 1; } view { flex-shrink: 0; } } } } </style>