1、效果圖
? ? ?
2、 實(shí)現(xiàn)過程
?1、登錄高德地圖開發(fā)者平臺(tái)?高德開放平臺(tái) | 高德地圖API，申請(qǐng)接口Key
?
2、在高德開發(fā)平臺(tái)下載微信小程序SDK，https://lbs.amap.com/api/wx/download
?解壓下載的文件得到 amap-wx.js ，在創(chuàng)建的項(xiàng)目中，新建一個(gè)名為 libs 目錄，將 amap-wx.js 文件拷貝到 libs 的本地目錄下。
3、微信小程序后臺(tái)添加安全域名（這個(gè)必須設(shè)置，不然無法使用定位功能）
登錄微信公眾平臺(tái)，在 "設(shè)置" → "開發(fā)設(shè)置" 中設(shè)置 request 合法域名，將?https://restapi.amap.com?中添加進(jìn)去，如下圖所示：
?文章來源：http://www.zghlxwxcb.cn/news/detail-767782.html
? 4、具體代碼
<template>
<view class="content">
<!-- <view class="btns">
<view @click="back">取 消</view>
<view @click="getCurrentLocation">獲取當(dāng)前地址</view>
</view> -->
<view class="inputCon">
<view class="searchView">
<text class="iconfont icon-sousuo" @click="searchFn"></text>
<input type="text" placeholder="搜索地點(diǎn)" 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> -->
<!-- 搜索框 -->
<!-- 地點(diǎn)列表部分 -->
<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';
// 創(chuàng)建地圖
var myAmapFun = new amapFile.AMapWX({
key: ''
}); //key值要申請(qǐng)為 去高德地圖申請(qǐng)微信小程序的key
// var myAmapFun = new amapFile.AMapWX({key: ''}); //key我的
export default {
data() {
return {
mapFlafg:false,
selectIndex: undefined,
selectAddr: {},
searchWords: "",
id: 1, // 使用 marker點(diǎn)擊事件 需要填寫id
title: 'map',
latitude: 39.91667, // 緯度
longitude: 116.41667, // 經(jīng)度
markers: [{
latitude: 39.91667, // 緯度
longitude: 116.41667, // 經(jīng)度
width: 30,
height: 30,
iconPath: ''
// iconPath: '../../static/ditu.png'
}],
dataTips: []
}
},
onLoad() {
var self = this;
uni.getLocation({
type: 'gcj02',
success: function(res) {
console.log(res, '當(dāng)前地址定位');
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: () => {
// 獲取當(dāng)前位置的地點(diǎn)列表
myAmapFun.getPoiAround({
location: self.longitude + ',' + self.latitude,
success: (data) => {
console.log("獲取當(dāng)前的列表", data);
this.dataTips = data.poisData;
},
fail: (info) => {
console.log(info, '點(diǎn)擊地圖錯(cuò)誤信息1')
}
})
}
});
},
methods: {
cancel() {
if (this.searchWords) {
this.searchWords = "";
myAmapFun.getPoiAround({
location: this.markers[0].longitude + ',' + this.markers[0].latitude,
success: (data) => {
console.log("獲取當(dāng)前的列表", 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)
}
})
},
// 根據(jù)地址列表中選擇某一個(gè)地點(diǎn)
select(add, index) {
if (!add) {
return;
}
this.selectIndex = index;
var location = add.location.split(",");
console.log(location, add, '列表地點(diǎn)的經(jīng)緯度');
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);
// 選擇地點(diǎn)后，將選取的地點(diǎn)傳遞到前一個(gè)頁面中
var pages = getCurrentPages(); // 獲取所有的頁面棧
var prevPage = pages[pages.length - 2]; // 找到上一個(gè)頁面，注意是頁面，如果是頁面中有組件，則需要通過頁面接受到數(shù)據(jù)后，再次往組件中傳遞
prevPage.$vm.userAddress.locationAddress = this.selectAddr.address; //在上一個(gè)頁面中就可以用userAddress進(jìn)行接收
prevPage.$vm.userAddress.detail = this.selectAddr.detailAddress; //在上一個(gè)頁面中就可以用userAddress進(jìn)行接收
prevPage.$vm.selectAddr = this.selectAddr;
prevPage.$vm.address = {
province: add.pname,
city: add.cityname,
district: add.adname,
}
uni.navigateBack({
delta: 1
});
},
// 在地圖上點(diǎn)擊進(jìn)行選點(diǎn)，這個(gè)選點(diǎn)在地圖縮放比例較大時(shí)無效，因?yàn)榫x的問題。
tap(e) {
console.log(e, '點(diǎn)擊了地圖');
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("獲取當(dāng)前的列表", data);
this.dataTips = data.poisData;
},
fail: (info) => {
console.log(info, '點(diǎn)擊地圖錯(cuò)誤信息1')
}
})
},
fail: (info) => {
console.log(info, '點(diǎn)擊地圖錯(cuò)誤信息2');
}
})
},
// 根據(jù)內(nèi)容進(jìn)行檢索
searchFn() {
console.log("根據(jù)地址檢索", 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, '當(dāng)前地址定位');
// 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>
?文章來源地址http://www.zghlxwxcb.cn/news/detail-767782.html
到了這里，關(guān)于微信小程序使用高德地圖實(shí)現(xiàn)檢索定位附近周邊的POI功能示例的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
