百度地图选点
引入百度地图SDK
-
在百度地图官网下载百度地图sdk文件
-
初始化地图
this.BMap = new bmap.BMapWX({ ak: '' //百度地图密钥 }); -
地图api使用
//内容搜索 self.BMap.search({ //参数 query: self.searchWords, //搜索关键字 location: location != "" ? location : "", //定位 iconPath: require("@/static/img/map/icon-dadian.png"),//图标 })
<template>
<view class="mapPage">
<!-- 顶部按钮 -->
<view class="btnHandle">
<view class="btnItem" @click="goBack(false)">
<text>取消</text>
</view>
<view class="btnItem submit" @click="goBack(true)">
<text>确定</text>
</view>
</view>
<!-- 地图部分 -->
<map style="width: 100%; height: 60vh" :latitude="latitude" :longitude="longitude" :markers="markers" @tap="tap"
:include-points="markers" :scale="8" />
<!-- 搜索框 -->
<view class="searchView">
<u-search placeholder="搜索位置" :showAction="false" v-model="searchWords" @search="searchFn('')"
@clickIcon="searchFn('')"></u-search>
<!-- <input
type="text"
placeholder="搜索地点"
v-model="searchWords"
confirm-type="search"
@confirm="searchFn"
/> -->
</view>
<!-- 地点列表部分ss -->
<view class="map-list">
<view class="item" v-for="(item, index) in dataTips" :key="item.id" @click="select(item, index)"
:class="selectIndex == index ? 'active' : ''">
<view class="title">{{ item.title }}</view>
<view class="address">{{ item.address }}</view>
</view>
</view>
</view>
</template>
<script>
//在百度地图官网下载百度地图sdk文件
let bmap = require("@/utils/mapSdk/bmap-wx");
export default {
data() {
return {
BMap: null,
selectAddr: {
longitude: null,
latitude: null
},
selectIndex: null,
latitude: null,
longitude: null,
markers: [{
id:1,
latitude: null,
longitude: null,
width: 30,
height: 30,
iconPath: require("@/static/img/map/icon-dadian.png")
}],
searchWords: "",
dataTips: [],
error: null
};
},
async onLoad(option) {
let self = this
if (option.lon != null && option.lat != null) {
self.markers[0].latitude = option.lat
self.markers[0].longitude = option.lon
self.latitude = option.lat
self.longitude = option.lon
self.selectAddr.latitude = option.lat
self.selectAddr.longitude = option.lon
self.getLocationInfo();
} else {
await uni.getLocation({
type: 'wgs84',
geocode: true, //设置该参数为true可直接获取经纬度及城市信息
success: function(res) {
self.markers[0].latitude = res.latitude
self.markers[0].longitude = res.longitude
self.latitude = res.latitude
self.longitude = res.longitude
self.selectAddr.latitude = res.latitude
self.selectAddr.longitude = res.longitude
self.getLocationInfo();
},
fail: function() {
uni.showToast({
title: '获取地址失败，将导致部分功能不可用',
icon: 'none'
});
}
});
}
},
created() {
this.BMap = new bmap.BMapWX({
ak: '' //百度地图密钥
});
this.$set(this.markers[0], "iconPath", "@/static/img/map/icon-dadian.png");
this.$forceUpdate();
},
methods: {
// 在地图上点击进行选点，这个选点在地图缩放比例较大时无效，因为精读的问题。
tap(e) {
console.log(e);
this.selectAddr = {
latitude: e.detail.latitude,
longitude: e.detail.longitude,
};
(this.markers[0].latitude = e.detail.latitude),
(this.markers[0].longitude = e.detail.longitude);
this.getLocationInfo();
},
// 根据内容进行检索
searchFn(location) {
let self = this;
console.log(self.searchWords);
self.selectIndex = null
self.BMap.search({
query: self.searchWords,
location: location != "" ? location : "",
iconPath: require("../../static/img/map/icon-dadian.png"),
success: (res) => {
console.log(res.wxMarkerData, 'adress');
if (res.wxMarkerData && res.wxMarkerData.length > 0) {
this.dataTips = res.wxMarkerData;
// this.markers[0].latitude = res.data[0].location.lat;
// this.markers[0].longitude = res.data[0].location.lng;
}
},
fail: (e) => {
this.error = e
console.log(e);
},
});
},
// 根据地址列表中选择某一个地点
select(item, index) {
if (!item) {
return;
}
this.selectIndex = index;
this.searchWords = item.address;
this.selectAddr = {
latitude: item.latitude,
longitude: item.longitude
};
this.markers[0].latitude = item.latitude;
this.markers[0].longitude = item.longitude
},
// 获取当前位置
getLocationInfo() {
let self = this;
self.BMap.regeocoding({
location: `${self.selectAddr.latitude },${self.selectAddr.longitude}`,
success: function(res) {
self.searchWords = res.wxMarkerData[0].address
self.selectIndex = null
if (self.searchWords != "") {
let location = `${self.selectAddr.latitude },${self.selectAddr.longitude}`
self.searchFn(location)
}
},
fail(e) {
alert("error")
console.log(e);
},
});
},
goBack(flag) {
if (flag) {
// 获取所有页面栈实例列表
let pages = getCurrentPages();
// 上一页页面实例
let prevPage = pages[pages.length - 2];
prevPage.$vm.formInline.area = this.searchWords
prevPage.$vm.formInline.lon = this.selectAddr.longitude
prevPage.$vm.formInline.lat = this.selectAddr.latitude
prevPage.selectAddr = this.selectAddr
uni.navigateBack({
delta: 1
});
} else {
uni.navigateBack()
}
}
},
};
</script>
腾讯地图使用方法
<script>
let QQMapWX = require("@/utils/mapSdk/qqmap-wx-jssdk");
export default {
data() {
return {
qqmapsdk: null,
selectAddr: {},
selectIndex: null,
latitude: null,
longitude: null,
markers: [{
latitude: null,
longitude: null,
width: 30,
height: 30,
iconPath: require("@/static/img/map/icon-dadian.png")
}],
searchWords: "",
dataTips: [],
error:null
};
},
created() {
this.qqmapsdk = new QQMapWX({
key: "T54BZ-DEHLX-F5J4Y-7NJLZ-ZHNEF-66BH7",
});
},
methods: {
// 在地图上点击进行选点，这个选点在地图缩放比例较大时无效，因为精读的问题。
tap(e) {
console.log(e);
this.selectAddr = {
latitude: e.detail.latitude,
longitude: e.detail.longitude,
};
(this.markers[0].latitude = e.detail.latitude),
(this.markers[0].longitude = e.detail.longitude);
this.getLocationInfo();
},
// 根据内容进行检索
searchFn() {
let self = this;
console.log(self.searchWords);
self.selectIndex = null
self.qqmapsdk.search({
keyword: self.searchWords,
success: (res) => {
console.log(res.data);
if (res.data && res.data.length > 0) {
this.dataTips = res.data;
}
},
fail: (e) => {
this.error = e
console.log(e);
},
});
},
// 根据地址列表中选择某一个地点
select(item, index) {
if (!item) {
return;
}
this.selectIndex = index;
let location = item.location
this.searchWords = item.address;
this.selectAddr = {
latitude: location.lat,
longitude: location.lng
};
this.markers[0].latitude = location.lat;
this.markers[0].longitude = location.lng
},
// 获取当前位置
getLocationInfo() {
let self = this;
self.qqmapsdk.reverseGeocoder({
location: {
latitude: self.selectAddr.latitude,
longitude: self.selectAddr.longitude,
},
success: function(res) {
self.searchWords = res.result.address;
self.selectIndex = null
if(self.searchWords !=""){
self.searchFn()
}
},
fail(e) {
alert("error")
console.log(e);
},
});
},
goBack(flag){
if(flag) {
// 获取所有页面栈实例列表
let pages = getCurrentPages();
// 上一页页面实例
let prevPage = pages[ pages.length - 2 ];
prevPage.$vm.formInline.area = this.searchWords
prevPage.$vm.formInline.lon = this.selectAddr.longitude
prevPage.$vm.formInline.lat = this.selectAddr.latitude
prevPage.selectAddr = this.selectAddr
uni.navigateBack({
delta: 1
});
}else {
uni.navigateBack()
}
}
},
};
</script>
