微信小程序使用高德地图（amap）实现检索定位附近周边的POI功能示例
先给大家看一下效果图展示：1、登录高德地图开发者平台https://lbs.amap.com/，申请接口Key2、在高德开发平台下载微信小程序SDK，https://lbs.amap.com/api/wx/download解压下载的文件得到 amap-wx.js ，在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js 文件拷贝到 libs 的本地目录下...
·
先给大家看一下效果图展示：
1、登录高德地图开发者平台 https://lbs.amap.com/，申请接口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、具体代码
index.wxml
<view class="search">
<van-search value="" placeholder="请输入要搜索的地址名称" data-city="{{city}}" data-longitude="{{longitude}}" data-latitude="{{latitude}}" bind:change="onInputChange" bind:focus="onInputFocus" shape="round" />
</view>
<!--地图-->
<view wx:if="{{mapshow}}">
<view class="map_container">
<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>
<view class="map_text" wx:if="{{maptextshow}}">
<view class="name">{{textData.name}}</view>
<view class="desc">
<my-icon type="map;" size="35" color="#4295FA" />
<view class="address">{{textData.address}}<text style="color:#4295FA;" wx:if="{{range!=''}}">（距离你{{range}}）</text></view>
</view>
<view class="navigation" bindtap='map'>
<my-icon type="navigation;" size="70" color="#0AC408" />
</view>
</view>
</view>
<!--搜索相关内容-->
<view wx:if="{{tipshow}}">
<view bindtouchstart="bindSearch" data-keywords="{{item.name}}" class="{{index % 2 == 0?'odd_row':'even_row'}}" data-index="{{index}}" wx:for="{{tips}}" wx:for-item="item" wx:key="mykey">
{{item.name}}
</view>
</view>注明：搜索框使用的是vant-weapp框架，参考文档：https://github.com/youzan/vant-weapp
index.wxss
.search {
width: 100%;
height: 100rpx;
}
.map_container {
width: 100%;
overflow: hidden;
position: absolute;
top: 100rpx;
bottom: 100rpx;
left: 0;
right: 0;
}
.map {
width: 100%;
height: 100%;
}
.map_text {
width: 95%;
height:auto;
position: absolute;
left: 0;
bottom: 0;
background: #fff;
padding: 2.5%;
overflow: hidden;
}
.map_text .navigation {
position: absolute;
right: 20rpx;
top: 35rpx;
}
.map_text .name {
line-height: 60rpx;
font-size: 30rpx;
padding-left: 10rpx;
}
.map_text .desc {
width: 100%;
display: flex;
line-height: 35rpx;
}
.map_text .desc .address {
width: calc(100% - 120rpx);
width: -webkit-calc(100% - 120rpx);
width: -moz-calc(100% - 120rpx);
font-size: 25rpx;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.odd_row {
color: #666;
padding: 10rpx 30rpx;
height: 70rpx;
line-height: 70rpx;
background: rgba(236, 255, 255, 0.8);
cursor: pointer;
}
.even_row {
color: #666;
padding: 10rpx 30rpx;
height: 70rpx;
line-height: 70rpx;
background: rgba(241, 255, 222, 0.8);
cursor: pointer;
}
index.js
//引入高德SDK
var amapFile = require('../../libs/amap-wx.js');
var key = "高德地图的key";
var markersData = [];
Page({
/**
* 页面的初始数据
*/
data: {
markers: [],
latitude: '',
longitude: '',
textData: {},
city: '',
keywords: '加油站',
mapshow:true,
maptextshow: false,
tipshow:false,
tips: {},
isIos: false,
currentLocation:{},
range:'',
},
makertap: function (e) {
var id = e.markerId;
var that = this;
that.showMarkerInfo(markersData, id);
that.changeMarkerColor(markersData, id);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (e) {
var that = this;
//判断是不是ios系统
wx.getSystemInfo({
success: function (res) {
if (res.platform == "ios") {
that.setData({
isIos:true
});
}
}
});
//获取当前位置
that.getMyLocation();
wx.getSetting({
success: (res) => {
// res.authSetting['scope.userLocation'] == undefined 表示 初始化进入该页面
// res.authSetting['scope.userLocation'] == false 表示 非初始化进入该页面,且未授权
// res.authSetting['scope.userLocation'] == true 表示 地理位置授权
if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
wx.showModal({
title: '是否授权当前位置',
content: '需要获取您的地理位置，请确认授权，否则无法获取您所需数据',
success: function (res) {
if (res.cancel) {
wx.showToast({
title: '授权失败',
image: '/images/fail.png',
duration: 1000
})
that.setData({
textData: {
name: 'Error：用户取消授权',
address: '无法加载地图，请在设置中允许请求位置信息'
}
});
} else if (res.confirm) {
wx.openSetting({
success: function (dataAu) {
if (dataAu.authSetting["scope.userLocation"] == true) {
wx.showToast({
title: '授权成功',
icon: 'success',
duration: 1000
})
//再次授权后，加载地图
that.showMap(that.data.keywords);
} else {
wx.showToast({
title: '授权失败',
image: '/images/fail.png',
duration: 1000
});
that.setData({
textData: {
name: 'Error：授权失败',
address: '无法加载地图，请在设置中允许请求位置信息'
}
});
}
}
})
}
}
})
} else {
//授权后默认加载
that.showMap(that.data.keywords);
}
}
});
},
showMap: function (keywords){
var that = this;
var myAmapFun = new amapFile.AMapWX({ key: key });
var params = {
iconPathSelected: '../../images/marker_checked.png',
iconPath: '../../images/marker.png',
success: function (data) {
markersData = data.markers;
var poisData = data.poisData;
var markers_new = [];
markersData.forEach(function (item, index) {
markers_new.push({
id: item.id,
latitude: item.latitude,
longitude: item.longitude,
iconPath: item.iconPath,
width: item.width,
height: item.height
})
})
if (markersData.length > 0) {
that.setData({
markers: markers_new
});
that.setData({
city: poisData[0].cityname || ''
});
that.setData({
latitude: markersData[0].latitude
});
that.setData({
longitude: markersData[0].longitude
});
that.showMarkerInfo(markersData, 0);
} else {
that.setData({
textData: {
name: '抱歉，未找到结果',
address: 'Error：no results found'
},
range : ''
});
}
},
fail: function (info) {
/*
//如果想使用定位来计算距离的话，苹果手机就得要求用户打开定位服务
if (that.data.isIos){
wx.showModal({
title: '提示',
content: '定位失败,请前往设置打开定位权限（设置 → 隐私 → 定位服务）' ,
success: function (res) {
if (res.confirm) {
//用户可能已重新开启定位，因此在这里尝试重新加载地图
that.showMap(that.data.keywords);
} else if (res.cancel) {
//用户点击取消，返回上一菜单
wx.navigateBack({ changed: true });
}
}
});
}
*/
}
}
params.querykeywords = keywords;
myAmapFun.getPoiAround(params)
},
onInputFocus: function (e) {
this.setData({
mapshow: false,
tipshow: true
});
},
onInputChange: function (e) {
var that = this;
var keywords = e.detail;
if (keywords==""){
that.setData({
mapshow: true,
tipshow: false
});
}
var dataset = e.target.dataset;
var myAmapFun = new amapFile.AMapWX({ key: key });
myAmapFun.getInputtips({
keywords: keywords,
location: dataset.longitude + ',' + dataset.latitude,
city: dataset.city,
success: function (data) {
if (data && data.tips) {
that.setData({
tips: data.tips
});
}
}
})
},
bindSearch: function (e) {
var keywords = e.target.dataset.keywords;
this.setData({
mapshow: true,
tipshow: false
});
this.showMap(keywords);
},
showMarkerInfo: function (data, i) {
var that = this;
console.log(that.data.currentLocation);
//计算距离
var lat1 = that.data.currentLocation.latitude;
var lng1 = that.data.currentLocation.longitude;
var lat2 = data[i].latitude;
var lng2 = data[i].longitude;
var distance = that.getDistance(lat1, lng1, lat2, lng2);
distance = parseInt(distance * 1000);
if (distance != null && distance>0){
var range = distance + "米";
if (distance >= 1000) {
range = (Math.round(distance / 100) / 10).toFixed(1) + "公里";
}
}
that.setData({
textData: {
name: data[i].name,
address: data[i].address == "" ? '地址不详' : data[i].address,
latitude: data[i].latitude,
longitude: data[i].longitude,
},
range: range,
maptextshow:true
});
},
changeMarkerColor: function (data, i) {
var markers = [];
for (var j = 0; j < data.length; j++) {
if (j == i) {
data[j].iconPath = "../../images/marker_checked.png";
} else {
data[j].iconPath = "../../images/marker.png";
}
markers.push({
id: data[j].id,
latitude: data[j].latitude,
longitude: data[j].longitude,
iconPath: data[j].iconPath,
width: data[j].width,
height: data[j].height
})
}
this.setData({
markers: markers
});
},
map: function (e) {
var that=this;
wx.openLocation({
//当前经纬度
latitude: that.data.textData.latitude,
longitude: that.data.textData.longitude,
//缩放级别默认18,缩放比例为5-18
scale: 10,
//位置名
name: that.data.textData.name,
//详细地址
address: that.data.textData.address,
success: function (res) {
},
fail: function (err) {
wx.showToast({
title: '调用地图失败',
image: '/images/fail.png',
duration: 1000
})
},
})
},
/// <summary>
/// 给定的经度1，纬度1；经度2，纬度2. 计算2个经纬度之间的距离。
/// </summary>
/// <param name="lat1">经度1</param>
/// <param name="lon1">纬度1</param>
/// <param name="lat2">经度2</param>
/// <param name="lon2">纬度2</param>
/// <returns>距离（公里、千米）</returns>
getDistance: function (lat1, lon1, lat2, lon2) {
var EARTH_RADIUS = 6378.137; //地球半径
var radLat1 = lat1 * Math.PI / 180.0;
var radLat2 = lat2 * Math.PI / 180.0;
var radlon1 = lon1 * Math.PI / 180.0;
var radlon2 = lon2 * Math.PI / 180.0;
//差值
var vLat = radLat1 - radLat2;
var vLon = radlon1 - radlon2;
//s就是一个球体上的切面，它的圆心即是球心的一个周长最大的圆。
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(vLat / 2), 2) +
Math.cos(radLat1) * Math.cos(radLat2) *
Math.pow(Math.sin(vLon / 2), 2)));
s = s * EARTH_RADIUS;
var distance = Math.round(s * 10000) / 10000;
return distance;
},
//获取当前位置
getMyLocation:function(){
var that=this;
wx.getLocation({
type: 'gcj02',
success(data) {
if (data) {
that.setData({
currentLocation:data
});
}
}
});
},
})7、 官方参考示例（demo）地址：
https://github.com/amap-demo/wx-regeo-poiaround-weather
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
11
0- 0
已为社区贡献13条内容
所有评论(0)