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>
4583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
