使用腾讯位置服务
作者：互联网
<template>
<div class="page-store-map">
<div class="search-place-box">
<div class="search-place-bg" v-show="currentAddress == ''">
<svg t="1574479404611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1224" data-spm-anchor-id="a313x.7781069.0.i1" width="26" height="26"><path d="M1011.369332 960.985828 838.196247 775.139096c70.193689-84.783988 108.795868-190.480262 108.795868-301.721833 0-261.016759-211.775264-473.417263-472.103338-473.417263-260.252349 0-472.030683 212.362642-472.030683 473.417263 0 261.041318 211.778334 473.40089 472.064452 473.40089 68.193125-0.038886 133.954875-14.310937 195.437158-42.384319 18.262946-8.343015 26.319435-29.950126 18.010189-48.223305-8.311293-18.352997-29.960359-26.472931-48.080042-18.063401-52.039213 23.743774-107.667162 35.799344-165.402097 35.840276C254.653841 873.986381 75.483158 694.290743 75.483158 473.417263c0-220.8612 179.164542-400.583444 399.405619-400.583444 220.274846 0 399.476227 179.695638 399.476227 400.583444 0 103.975073-39.546691 202.480574-111.302969 277.386588-13.901615 14.496156-13.429871 37.544081 0.980327 51.501978 1.089821 1.063215 2.509147 1.458211 3.745301 2.362814 0.985444 1.455141 1.489934 3.134387 2.720971 4.446265l187.807387 201.551412c7.123234 7.673773 16.812921 11.543917 26.508747 11.543917 8.893554 0 17.793248-3.241834 24.802896-9.852392C1024.260943 998.714104 1025.059122 975.666178 1011.369332 960.985828L1011.369332 960.985828 1011.369332 960.985828zM1011.369332 960.985828" p-id="1225" fill="#999999"></path></svg><span>搜索地点</span>
</div>
<input type="search" v-model="currentAddress" :class="{ isTransparent: currentAddress == '' }" @keyup.enter="searchAddress()" />
</div>
<div class="search-jwd-box" v-show="isShowLongLat == '1'">
<input maxlength="20" type="text" v-model="currentLong" placeholder="请输入经度" /><input maxlength="20" type="text" v-model="currentLat" placeholder="请输入纬度" /><input type="button" value="搜索" @click="searchLocationByLongLat" />
</div>
<div id="container"></div>
<ul>
<li v-for="(position, index) in positionList" :key="index" :class="position.id == activeId ? 'active' : ''" @click="changeActiveId(position.id, position.latLng)">
<h3>{{ position.name }}</h3>
<p>{{ position.address }}</p>
</li>
</ul>
<div class="submit-box">
<div @click="closeStoreMap">返回</div>
<div @click="toStoreRegister">确定</div>
</div>
</div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
.page-store-map {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
display: flex;
flex-direction: column;
background-color: #fff;
.search-place-box {
width: 100%;
height: pxToRem(120);
position: relative;
.search-place-bg {
width: pxToRem(690);
height: pxToRem(70);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #F0F0F0;
line-height: pxToRem(72);
text-align: center;
color: #ABABAB;
font-size: 14px;
border-radius: pxToRem(10);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
svg {
width: pxToRem(26);
height: pxToRem(26);
margin-right: pxToRem(14);
margin-top: pxToRem(-2);
}
}
input {
width: pxToRem(690);
height: pxToRem(70);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
font-size: 14px;
padding: 0 pxToRem(10);
line-height: normal;
border-radius: pxToRem(10);
background-color: #F0F0F0;
box-sizing: border-box;
&.isTransparent {
background-color: transparent;
}
}
}
.search-jwd-box {
height: pxToRem(70);
padding: pxToRem(20) 0 pxToRem(20) pxToRem(30);
background-color: #F7F7F7;
display: flex;
border-bottom: pxToRem(10) solid #fff;
input {
background-color: #fff;
border-radius: pxToRem(6);
width: pxToRem(260);
box-sizing: border-box;
border: 1px solid #E7E7E7;
line-height: pxToRem(70);
&:first-child {
margin-right: pxToRem(10);
padding: 0 pxToRem(21);
@include placeholder(#ABABAB,14px);
}
&:nth-child(2) {
margin-right: pxToRem(20);
padding: 0 pxToRem(21);
@include placeholder(#ABABAB,14px);
}
&:last-child {
width: pxToRem(140);
border-color: #3C77DA;
color: #3C77DA;
text-align: center;
}
}
}
#container {
height: pxToRem(490);
}
ul {
margin-top: pxToRem(34);
padding-bottom: pxToRem(25);
flex: 1;
overflow-y: auto;
li {
margin-bottom: pxToRem(39);
padding-left: pxToRem(76);
padding-right: pxToRem(30);
position: relative;
h3 {
line-height: pxToRem(40);
color: #333;
font-size: 14px;
}
p {
line-height: pxToRem(33);
color: #999;
font-size: 12px;
}
&:last-child {
margin-bottom: 0;
}
&:after {
content: "";
display: block;
width: pxToRem(24);
height: pxToRem(24);
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: pxToRem(25);
left: pxToRem(30);
}
&.active:after {
top: pxToRem(23);
border-radius: 0;
width: pxToRem(26);
height: pxToRem(29);
border: 0 none;
background: assetsImgURL('map.png') no-repeat;
background-size: contain;
}
}
}
.submit-box {
height: pxToRem(120);
display: flex;
justify-content: space-between;
padding: 0 pxToRem(30);
align-items: center;
box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.1);
div {
box-sizing: border-box;
font-size: 15px;
height: pxToRem(70);
line-height: pxToRem(72);
text-align: center;
border-radius: pxToRem(35);
}
div:first-child {
width: pxToRem(200);
border: 1px solid #DEDEDE;
color: #333;
}
div:last-child {
width: pxToRem(470);
background-color: #2DC927;
color: #fff;
font-weight: bold;
}
}
}
</style>
<script>
// import util from 'js/base/util';
export default {
data(){
return {
searchService: null,
geocoder: null,
map: null,
markers: [],
// 当前页面的详细地址、经纬度
currentAddress: '',
currentLat: '',
currentLong: '',
// 列表
positionList: [],
activeId: ''
}
},
props: ['dataFromStoreRegister', 'windowHeight'],
created() {
this.$setTitle('定位地址');
},
mounted(){
this.mapInit(); // 地图初始化
this.searchAddress(this.$store.state.bossAddress); // 刚进页面先取一下store里的地址来一次搜索地点
// console.log(this.$store.state.bossAddress);
// 定死页面高度
$('.page-store-map').height(this.windowHeight + 'px');
},
computed: {
bossLatitude(){
return this.$store.state.bossLatitude;
},
bossLongitude(){
return this.$store.state.bossLongitude;
},
sheng(){
return this.dataFromStoreRegister.sheng;
},
shi(){
return this.dataFromStoreRegister.shi;
},
qu(){
return this.dataFromStoreRegister.qu;
},
isShowLongLat(){
return this.dataFromStoreRegister.isshowlonglat;
}
},
watch: {
},
methods: {
searchAddress(searchKey) { // 搜索地址
// let fullAddress = this.sheng + this.shi + this.qu + this.currentAddress;
// this.geocoder.getLocation(fullAddress);
// 设置搜索的范围和关键字等属性
var _this = this;
var keyword;
if(searchKey){
keyword = searchKey; // 用于刚进页面搜索store里面存的地址
this.currentAddress = searchKey;
} else {
keyword = this.currentAddress;
}
if(keyword.trim() == ''){
return;
}
var region = this.shi;
var pageIndex = 0;
var pageCapacity = 20;
this.clearOverlays(_this.markers);
// 根据输入的城市设置搜索范围
this.searchService.setLocation(region);
// 设置搜索页码
this.searchService.setPageIndex(pageIndex);
// 设置每页的结果数
this.searchService.setPageCapacity(pageCapacity);
// 根据输入的关键字在搜索范围内检索
this.searchService.search(keyword);
},
searchLocationByLongLat() { // 根据经纬度搜索地址
let _this = this;
let { currentLong: Longitude, currentLat: Latitude } = this;
// 经纬度验证
if (/^[\-]?[1-9]\d{0,2}\.[0-9]+$/.test(Longitude) && /^[\-]?[1-9]\d{0,1}\.[0-9]+$/.test(Latitude)) {
if (!/^[\-]?[1-9]\d{0,2}\.[0-9]{4,}$/.test(Longitude) || !/^[\-]?[1-9]\d{0,1}\.[0-9]{4,}$/.test(Latitude)) {
_this.$toast('经纬度需精确到小数点后至少4位。');
return;
} else if (Longitude > 180 || Latitude > 90) {
_this.$toast('纬度、经度格式不正确！纬度范围-90~90，经度范围-180~180。');
return;
}
} else {
if (!/^[\-]?0\.[0-9]{4,}$/.test(Longitude) || !/^[\-]?0\.[0-9]{4,}$/.test(Latitude)) {
_this.$toast('纬度、经度格式不正确！纬度范围-90~90，经度范围-180~180。');
return;
}
}
var isScoped = 2;
$.ajax({
url: 'https://apis.map.qq.com/ws/geocoder/v1',
data: {
location: Latitude + ',' + Longitude,
get_poi: 0,
key: 'JHIBZ-CTWR5-UJFIK-Q4HGE-4Z766-C7BLV',
output: 'jsonp'
},
async: false,
dataType: 'jsonp',
success: function (res) {
if (res.status == 0) {
var returnData = res.result.address_component;
if (returnData.hasOwnProperty('province')) { // 中国
if ((returnData.province.indexOf(_this.sheng) !== -1) && (returnData.city.indexOf(_this.shi) !== -1)) { // 省、市
isScoped = 1;
} else { // 香港澳门台湾
if ((_this.sheng.indexOf('香港') !== -1) && (returnData.province.indexOf('香港') !== -1)) {
isScoped = 1;
} else if ((_this.sheng.indexOf('澳门') !== -1) && (returnData.province.indexOf('澳门') !== -1)) {
isScoped = 1;
} else if ((_this.sheng.indexOf('台湾') !== -1) && (returnData.province.indexOf('台湾') !== -1)) {
isScoped = 1;
} else {
isScoped = 0;
}
}
} else {
if (_this.sheng.indexOf('海外') !== -1) {
isScoped = 3; // 是海外
} else {
isScoped = 0; // 海外经纬度，但选择的不是海外
}
}
} else {
isScoped = 2;
_this.$toast(res.message);
}
if (isScoped == 0) {
_this.$toast('所输入的经纬度和地址不在同一范围内，请检查后重新输入。');
return;
}
if (isScoped == 2) {
return;
}
console.log(res.result);
_this.activeId = 'abc';
_this.positionList = [{
address: res.result.address,
name: res.result.formatted_addresses.recommend,
id: 'abc',
latLng: {
lat: Latitude,
lng: Longitude
}
}];
console.log(_this.positionList);
var latLng = new qq.maps.LatLng(Latitude, Longitude);
// 调用获取位置方法
_this.geocoder.getAddress(latLng);
}
});
},
mapInit() {
let _this = this;
// 初始地址 天河区政府
var center = new qq.maps.LatLng(23.12463, 113.36199);
// if(this.bossLatitude && this.bossLongitude){ // 刚进页面取一下存于store里面的经纬度用来定位地图中心点
// center = new qq.maps.LatLng(this.bossLatitude, this.bossLongitude);
// }
this.map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 15
});
// 设置Poi检索服务，用于本地检索、周边检索
this.searchService = new qq.maps.SearchService({
// 检索成功的回调函数
complete: function(results) {
// 设置回调函数参数
var pois = results.detail.pois;
var latlngBounds = new qq.maps.LatLngBounds();
var positionList = [];
for (var i = 0, l = pois.length; i < l; i++) {
var poi = pois[i];
// 经纬度至少要4位小数
if (poi.latLng.lng.toString().split(".")[1].length < 4) {
console.log(poi.latLng.lng.toString().split(".")[1].length);
poi.latLng.lng = poi.latLng.lng.toFixed(4);
}
if (poi.latLng.lat.toString().split(".")[1].length < 4) {
poi.latLng.lat = poi.latLng.lat.toFixed(4);
}
if(i == 0){ // 只标注第一个点
// 扩展边界范围，用来包含搜索到的Poi点
latlngBounds.extend(poi.latLng);
_this.currentLat = poi.latLng.lat;
_this.currentLong = poi.latLng.lng;
var marker = new qq.maps.Marker({
map: _this.map
});
marker.setPosition(pois[0].latLng);
_this.markers.push(marker);
_this.activeId = pois[0].id
}
positionList.push({
address: poi.address || '',
name: poi.name || '',
id: poi.id,
latLng: poi.latLng || { lat: '', lng: '' }
});
}
_this.positionList = positionList; // 更新一下视图层的列表
// 调整地图视野
_this.map.fitBounds(latlngBounds);
},
// 若服务请求失败，则运行以下函数
error: function() {
// _this.$toast('搜索不到结果');
}
});
// 调用地址解析类
this.geocoder = new qq.maps.Geocoder({
complete: function (result) {
_this.clearOverlays(_this.markers);
// 调整地图包含该点
var latlngBounds = new qq.maps.LatLngBounds();
latlngBounds.extend(result.detail.location);
_this.map.fitBounds(latlngBounds);
var marker = new qq.maps.Marker({
map: _this.map
});
marker.setPosition(result.detail.location);
_this.markers.push(marker);
}
});
},
clearOverlays(overlays) { // 除地图上的marker
var overlay;
while ((overlay = overlays.pop())) {
overlay.setMap(null);
}
},
changeActiveId(id, latLng){
var _this = this;
this.activeId = id;
this.clearOverlays(this.markers);
this.currentLat = latLng.lat;
this.currentLong = latLng.lng;
// 调整地图包含该点
var latlngBounds = new qq.maps.LatLngBounds();
latlngBounds.extend(latLng);
this.map.fitBounds(latlngBounds);
var marker = new qq.maps.Marker({
map: _this.map
});
marker.setPosition(latLng);
this.markers.push(marker);
},
toStoreRegister(){ // 确定修改
// 要拿来覆盖的数据有: 地址，以搜索列表的结果为准，不以输入框的结果为准
// 若是搜索地址，则搜索结果的经纬度会自动代入经纬度输入框
// 若是搜索经纬度，则搜索结果只有一个点，并且经纬度就是输入框的值
// 直接取输入框的经纬度来用，防止用户输入了经纬度不点击按钮，将经纬度是否在省市区内的逻辑改到提交那里。
let { positionList, currentLat, currentLong } = this;
// 拿到当前active的搜索结果的地址，若列表为空，则不覆盖原来的地址
for(var i = 0; i < positionList.length; i++) {
if(positionList[i].id == this.activeId){
// console.log(positionList[i].latLng.lat, positionList[i].latLng.lng);
// 去除省市区
var myBossAddress = positionList[i].address + positionList[i].name;
var shengshiqu = this.sheng + this.shi + this.qu;
var shengshi = this.sheng + this.shi;
console.log(myBossAddress, shengshiqu);
if(myBossAddress.includes(shengshiqu)){
myBossAddress = myBossAddress.replace(shengshiqu, '');
} else if(myBossAddress.includes(shengshi)){
myBossAddress = myBossAddress.replace(shengshi, '');
}
this.$store.commit('changeBossAddress', myBossAddress);
break;
}
}
// 直接取输入框的经纬度来覆盖
this.$store.commit('changeBossLatLong', { bossLatitude: currentLat, bossLongitude: currentLong });
// 隐藏当前组件
this.$parent.isShowStoreMap = false;
console.log(this.$store.state.bossAddress, this.$store.state.bossLatitude, this.$store.state.bossLongitude);
this.$setTitle("注册门店");
},
closeStoreMap(){ // 返回
this.$parent.isShowStoreMap = false;
console.log(this.$store.state.bossAddress, this.$store.state.bossLatitude, this.$store.state.bossLongitude);
this.$setTitle("注册门店");
}
}
};
</script>
红孩儿2011
发布了128 篇原创文章 · 获赞 3 · 访问量 2537
私信
关注
标签：poi,位置服务,latLng,使用,height,store,腾讯,var,pxToRem 来源： https://blog.csdn.net/qq_26642611/article/details/104560816