微信开发者工具在测试公众号功能时，定位模拟未能成功，尝试使用公众号的虚拟定位功能
最编程
2024-07-22 17:56:38
...
<template>
<div>
<van-popup width="600"
:style="{ height: '100%',width:'100%' }"
v-model="open"
>
<van-cell style="margin-top:10px;padding: 0px">
<van-row type="flex" justify="space-between">
<van-col span="12"><van-button plain hairline type="primary" @click="closeAlertDialog">取消</van-button></van-col>
<van-col span="12" style="text-align: end" > <van-button plain hairline type="primary" @click="OKAlertDialog">确定</van-button></van-col>
</van-row>
当前已选中地点：{{addressName}}
<van-search class="page-select-lump" v-model="keyword" placeholder="请输入搜索关键词" :show-action="keyword !== ''"
@cancel="onCancel">
<template v-if="loading" #left-icon>
<van-loading size="24"/>
</template>
</van-search>
</van-cell>
<mu-button slot="left" icon @click="closeAlertDialog">
<mu-icon value="close"></mu-icon>
</mu-button>
<amap
ref="myMap"
:style="{height:'80vh'}"
cache-key="coord-picker-map"
async
:center.sync="center"
:zoom.sync="zoom"
is-hotspot
map-style="amap://styles/makaron"
@click="onMapClick"
>
<amap-satellite-layer :visible="satellite"/>
<amap-marker v-if="position" ref="mapMarker" :position.sync="position"
:label="{
content: SearchAddress.formattedAddress,
direction: 'bottom',
}"/>
<div class="operation" style="margin-bottom: 20px;">
<div class="operation-box" @click="addressPositon()">
<van-icon name="location"/>
<p>定位</p>
</div>
</div>
</amap>
<van-popup v-model="searchH" position="bottom" :overlay="false" closeable :style="{ height: '30%' }">
<van-list
v-if="list.length > 0"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item.id" :title="item.name" :label="item.address" @click="goMap(item)"/>
</van-list>
<div class="noAd" v-else>
搜索不到地址，请重新输入
</div>
</van-popup>
</van-popup>
<div class="operation" style="margin-bottom: 20px;">
<div class="operation-box" @click="()=>{open=true}">
<van-icon name="location"/>
<p>定位</p>
</div>
</div>
</div>
</template>
<script>
import DragRise from '@/components/action/drag-rise' // 拖拽升起组件
import {loadPlugins} from '@amap/amap-vue';
import axios from 'axios'
export default {
name: "AddressAmap",
components: {DragRise},
props: {
open: {
default: false
},
TypeData: {
type: Array,
default: function () {
return []
}
},
},
data() {
return {
map: null,
value: null,
BMap: null, // 地图组件是否就绪 地图实例
h: window.innerHeight,
ak: "xxxx",
zoom: 14, // 画布大小
center: null, // 画布中心位置
location: "广东", // 搜索固定区域
keyword: "", // 搜索内容
SearchAddress: {address: "", point: null}, // 检索点详细信息
point: null, // 点击地图设置家或学校位置
nowAddress: {lng: 0, lat: 0}, // 当前定位位置
type: false,
address: {},
addlist: {},
addressName: '',
satellite: false,
position: null,
list: [],
loading: false,
finished: false,
searchH: false,
pageSize: 15,
pageIndex: 1,
searchState: false,
}
},
watch: {
// 检索点详细信息
keyword(newValue) {
// this.$refs.dragRise.shrink();
// let Hei = this.$refs.dragRise.Hei - 34;
// console.log('this.$refs.dragRise.dragRiseHei', this.$refs.dragRise.dragRiseHei);
let h = window.innerHeight * 2;
let _this = this;
let timer = null;
console.log(newValue, 'asss');
if (newValue === "") {
_this.searchH = false;
this.SearchAddress = {address: "", point: null};
} else {
this.searchAD(true);
_this.searchH = true;
}
},
async open(v) {
if (v == true) {
await loadPlugins(['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.Geolocation']);
this.ps = new AMap.PlaceSearch({
pageSize: this.pageSize,
city: '全国',
citylimit: true,
});
this.ac = new AMap.AutoComplete()
var options = {
'showButton': false,//是否显示定位按钮
'buttonPosition': 'LB',//定位按钮的位置
/* LT LB RT RB */
'buttonOffset': new AMap.Pixel(10, 20),//定位按钮距离对应角落的距离
'showMarker': true,//是否显示定位点
'markerOptions':{//自定义定位点样式，同Marker的Options
'offset': new AMap.Pixel(-18, -36),
'content':'<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
},
'showCircle': true,//是否显示定位精度圈
'circleOptions': {//定位精度圈的样式
'strokeColor': '#0093FF',
'noSelect': true,
'strokeOpacity': 0.5,
'strokeWeight': 1,
'fillColor': '#02B0FF',
'fillOpacity': 0.25
}
}
this.geocoder = new AMap.Geocoder(options)
console.log(this.$refs.myMap,'this.$refs.myMapthis.$refs.myMap');
this.addressPositon()
// this.WXlocation()
console.log('geocoder', )
}
}
},
mounted() {
axios.get()
this.$nextTick(() => {
this.$refs.dragRise.load() // 初始化组件
this.mapcontent()
})
},
methods: {
//定位
addressPositon() {
var _this = this
_this.wx.error(function (res) {
console.log(res, '错误')
})
_this.wx.ready(function () {
_this.wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
console.log(res,'111');
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
// _this.form.coordinateLeft = latitude
// _this.form.coordinateRight =longitude
//_this.form.address=latitude+'-'+longitude
console.log( longitude,latitude, '定位11111')
var addegt=[]
addegt.push(longitude)
addegt.push(latitude)
axios.get('https://restapi.amap.com/v3/assistant/coordinate/convert',{
params: {
key:'xxxx',
coordsys:'gps',
locations:addegt.join(','),
}
}).then(res => {
console.log(res,res.data.locations,'sad');
var address=res.data.locations.split(',')
if (res.data.status == 1) {
var lat =address[1] // 纬度，浮点数，范围为90 ~ -90
var lng = address[0]// 经度，浮点数，范围为180 ~ -180。
_this.position=[lng,lat]
console.log(_this.position,'_this.position=_this.position=');
// this.position=[114.0705726454,22.71638671875]
_this.center = [lng,lat];
_this.getAddress(_this.position)
}
// console.log(JSON.parse(res.msg),data)
})
// _this.wx.openLocation({
// latitude: parseFloat(latitude), // 纬度，浮点数，范围为90 ~ -90
// longitude: parseFloat(longitude), // 经度，浮点数，范围为180 ~ -180。
// name: 'a', // 位置名
// address: '', // 地址详情说明
// scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
// infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
// success: function (res) {
// console.log(res,'asas')
// }
// });
}
});
// _this.$toast('定位')
})
},
WXlocation() {
console.log('点击定位')
var options = {
noIpLocate:0,
noGeoLocation:0,
useNative:true,
'showButton': false,//是否显示定位按钮
'buttonPosition': 'LB',//定位按钮的位置
/* LT LB RT RB */
'buttonOffset': new AMap.Pixel(10, 20),//定位按钮距离对应角落的距离
'showMarker': true,//是否显示定位点
'markerOptions':{//自定义定位点样式，同Marker的Options
'offset': new AMap.Pixel(-18, -36),
'content':'<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
},
'showCircle': true,//是否显示定位精度圈
'circleOptions': {//定位精度圈的样式
'strokeColor': '#0093FF',
'noSelect': true,
'strokeOpacity': 0.5,
'strokeWeight': 1,
'fillColor': '#02B0FF',
'fillOpacity': 0.25
}
}
// var geolocation = new AMap.Geolocation(options)
// this.$nextTick(()=>{
// var geolocation = new AMap.Geolocation(options);
// this.$refs.myMap.$map.addControl(geolocation);
// geolocation.getCurrentPosition((status,result)=>{
// if(status=='complete'){
// console.log(result,'aaaaa');
// this.position=[result.position.lng,result.position.lat]
// // this.position=[114.0705726454,22.71638671875]
// this.getAddress(this.position)
// }else{
//
// }
// });
// })
},
goMap(val) {
this.keyword = '';
this.center = [val.location.lng, val.location.lat];
this.position = [val.location.lng, val.location.lat];
this.getAddress(this.position);
},
onMapClick(e) {
if (e.lnglat) {
this.position = [e.lnglat.lng, e.lnglat.lat];
this.center = [e.lnglat.lng, e.lnglat.lat];
this.getAddress(this.position)
} else {
this.position = null;
}
},
mapcontent() {
},
onCancel() {
},
searchAD(state) {
console.log(state)
if (state) {
this.searchState = true;
// this.$refs.searchList.scrollTo(0, 0, true);
this.finished = false;
this.pageIndex = 1;
this.ps.setPageIndex(this.pageIndex);
this.ps.search(this.keyword, (status, result) => {
this.searchState = false;
this.loading = false;
console.log(status, result);
// this.searching = false;
// if (query !== this.query) return;
if (status === 'complete' && result.poiList) {
this.list = result.poiList.pois;
if (this.list.length < 15) {
this.finished = true
}
} else {
this.list = [];
this.finished = true
}
});
} else {
this.pageIndex += 1;
this.ps.setPageIndex(this.pageIndex);
this.ps.search(this.keyword, (status, result) => {
this.loading = false;
// this.searching = false;
// if (query !== this.query) return;
if (status === 'complete' && result.poiList) {
this.list = this.list.concat(result.poiList.pois);
console.log(status, result)
} else {
this.finished = true
// this.results = [];
// this.total = 0;
}
});
}
},
AddOrUpdate() {
},
onLoad() {
this.searchAD(false);
},
/**
* 根据经纬度获取位置信息
* @param position
*/
getAddress(position) {
console.log(position, 'position');
var this_ = this;
this.geocoder.getAddress(position, function(status, result) {
if (status === 'complete' && result.regeocode) {
this_.SearchAddress = result.regeocode;
this_.$refs.mapMarker.label = {
content: this_.SearchAddress.formattedAddress,
direction: 'bottom',
};
console.log('status', status);
console.log('result', result)
this_.addressName= this_.SearchAddress.formattedAddress
this_.addlist={poresultsition: position, result: result}
// this_.searchH=true
} else {
this_.SearchAddress = {
formattedAddress: '高德暂无此地址信息'
}
}
})
},
onSearch(v) {
//输入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: this.map
}); //构造地点查询类
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
}
},
closeAlertDialog(v) {
this.open=false
this.$emit('closeDialog', false)
},
OKAlertDialog(v) {
this.open=false
this.$emit('change',this.addlist)
},
SetADDoptions() {
},
}
}
</script>
<style scoped lang="less">
#panel {
position: absolute;
background-color: white;
max-height: 30%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
.noAd {
color: silver;
text-align: center;
margin: 14px 0px;
}
.search-list {
z-index: 999;
position: fixed;
width: 100%;
overflow: auto;
bottom: 0;
background-color: white;
transition: 0.6s;
}
.AddreseSearch {
z-index: 2010;
position: fixed;
top: 0px;
width: 100%;
.van-search__content, .van-search__content--square {
background-color: #F6F6F6 !important;
}
.van-cell, .van-cell--borderless, .van-field {
background-color: #F6F6F6 !important;
}
}
// 搜索框
.btnMap {
padding-top: 6px;
overflow: hidden;
font-size: 12px;
button {
height: 35px;
line-height: 35px;
width: 95px;
}
button:nth-child(1) {
float: left;
margin-left: 10px;
}
button:nth-child(2) {
float: right;
margin-right: 10px;
}
}
// 修改保存按钮
.WatchAdderss_menu {
z-index: 99;
position: fixed;
bottom: 25px;
left: 10px;
div {
width: 40px;
height: 40px;
padding: 6px;
margin: 6px;
background-color: #8dc63f;
border-radius: 5px;
text-align: center;
p {
color: rgba(25, 31, 37, 0.56);
}
img {
margin-top: 3px;
width: 18px;
height: 18px;
}
}
}
.operation {
position: fixed;
bottom: 20px;
right: 20px;
border-radius: 10px;
box-shadow: 1px 2px 4px #bbbbbb;
// background-color: #fffdef;
.operation-box {
padding: 12px;
text-align: center;
font-size: 14px;
color: #707070;
}
}
// 菜单样式
</style>- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200.
- 201.
- 202.
- 203.
- 204.
- 205.
- 206.
- 207.
- 208.
- 209.
- 210.
- 211.
- 212.
- 213.
- 214.
- 215.
- 216.
- 217.
- 218.
- 219.
- 220.
- 221.
- 222.
- 223.
- 224.
- 225.
- 226.
- 227.
- 228.
- 229.
- 230.
- 231.
- 232.
- 233.
- 234.
- 235.
- 236.
- 237.
- 238.
- 239.
- 240.
- 241.
- 242.
- 243.
- 244.
- 245.
- 246.
- 247.
- 248.
- 249.
- 250.
- 251.
- 252.
- 253.
- 254.
- 255.
- 256.
- 257.
- 258.
- 259.
- 260.
- 261.
- 262.
- 263.
- 264.
- 265.
- 266.
- 267.
- 268.
- 269.
- 270.
- 271.
- 272.
- 273.
- 274.
- 275.
- 276.
- 277.
- 278.
- 279.
- 280.
- 281.
- 282.
- 283.
- 284.
- 285.
- 286.
- 287.
- 288.
- 289.
- 290.
- 291.
- 292.
- 293.
- 294.
- 295.
- 296.
- 297.
- 298.
- 299.
- 300.
- 301.
- 302.
- 303.
- 304.
- 305.
- 306.
- 307.
- 308.
- 309.
- 310.
- 311.
- 312.
- 313.
- 314.
- 315.
- 316.
- 317.
- 318.
- 319.
- 320.
- 321.
- 322.
- 323.
- 324.
- 325.
- 326.
- 327.
- 328.
- 329.
- 330.
- 331.
- 332.
- 333.
- 334.
- 335.
- 336.
- 337.
- 338.
- 339.
- 340.
- 341.
- 342.
- 343.
- 344.
- 345.
- 346.
- 347.
- 348.
- 349.
- 350.
- 351.
- 352.
- 353.
- 354.
- 355.
- 356.
- 357.
- 358.
- 359.
- 360.
- 361.
- 362.
- 363.
- 364.
- 365.
- 366.
- 367.
- 368.
- 369.
- 370.
- 371.
- 372.
- 373.
- 374.
- 375.
- 376.
- 377.
- 378.
- 379.
- 380.
- 381.
- 382.
- 383.
- 384.
- 385.
- 386.
- 387.
- 388.
- 389.
- 390.
- 391.
- 392.
- 393.
- 394.
- 395.
- 396.
- 397.
- 398.
- 399.
- 400.
- 401.
- 402.
- 403.
- 404.
- 405.
- 406.
- 407.
- 408.
- 409.
- 410.
- 411.
- 412.
- 413.
- 414.
- 415.
- 416.
- 417.
- 418.
- 419.
- 420.
- 421.
- 422.
- 423.
- 424.
- 425.
- 426.
- 427.
- 428.
- 429.
- 430.
- 431.
- 432.
- 433.
- 434.
- 435.
- 436.
- 437.
- 438.
- 439.
- 440.
- 441.
- 442.
- 443.
- 444.
- 445.
- 446.
- 447.
- 448.
- 449.
- 450.
- 451.
- 452.
- 453.
- 454.
- 455.
- 456.
- 457.
- 458.
- 459.
- 460.
- 461.
- 462.
- 463.
- 464.
- 465.
- 466.
- 467.
- 468.
- 469.
- 470.
- 471.
- 472.
- 473.
- 474.
- 475.
- 476.
- 477.
- 478.
- 479.
- 480.
- 481.
- 482.
- 483.
- 484.
- 485.
- 486.
- 487.
- 488.
- 489.
- 490.
- 491.
- 492.
- 493.
- 494.
- 495.
- 496.
- 497.
- 498.
- 499.
- 500.
- 501.
- 502.
- 503.
- 504.
- 505.
- 506.
- 507.
- 508.
- 509.
- 510.
- 511.
- 512.
- 513.
- 514.
- 515.
- 516.
- 517.
- 518.
- 519.
- 520.
- 521.
- 522.
- 523.
- 524.
- 525.
- 526.
- 527.
- 528.
- 529.
- 530.
- 531.
- 532.
- 533.
- 534.
- 535.
- 536.
- 537.
- 538.
- 539.