Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3ed455f2 1 parent 419e5251

定位功能调整

Inline Side-by-side
Showing 3 changed files with 414 additions and 266 deletions
/*
* @Date: 2023-07-21 14:25:45
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-24 11:25:29
* @LastEditTime: 2023-07-24 22:35:08
* @FilePath: /map-demo/src/common/inner_router.js
* @Description: 文件描述
*/
......@@ -21,12 +21,29 @@ const testInfo = [
[120.587233, 31.314961],
[120.587205, 31.315508],
[120.587197, 31.315602],
[120.587564, 31.315631],
[120.587563, 31.315637],
[120.587549, 31.315865],
],
distance: '',
},
{
id: 0,
path: [
[120.588288, 31.314212],
[120.587711, 31.314184],
[120.587694, 31.314368],
[120.587662, 31.314585],
[120.587474, 31.314573],
[120.587453, 31.314773],
[120.58765, 31.314786],
[120.587453, 31.314773],
[120.587422, 31.314937],
[120.587233, 31.314961],
[120.587205, 31.315508],
[120.587197, 31.315602],
[120.586621, 31.315511],
[120.586368, 31.315492],
[120.586123, 31.315362],
[120.585778, 31.31531],
[120.586619, 31.315514],
[120.58612, 31.315377],
[120.585628, 31.315353],
],
distance: '',
},
......@@ -74,34 +91,78 @@ const testInfo = [
[120.586816, 31.314399],
[120.586747, 31.314405],
[120.586738, 31.314469],
[120.585985, 31.314409],
[120.585984, 31.314337],
[120.585887, 31.314318],
[120.585895, 31.314159],
[120.585598, 31.314131],
[120.585412, 31.314195],
[120.585225, 31.314164],
[120.585152, 31.314032],
[120.585234, 31.313942],
[120.585311, 31.313884],
[120.585415, 31.313934],
[120.585601, 31.313955],
[120.585889, 31.313961],
[120.586052, 31.31397],
[120.586081, 31.313569],
[120.586081, 31.313569],
[120.585678, 31.313533],
[120.586081, 31.313569],
[120.586083, 31.31353],
[120.58643, 31.313572],
[120.586083, 31.31353],
[120.586094, 31.3134],
[120.585709, 31.313362],
[120.586094, 31.3134],
[120.586101, 31.313334],
[120.586365, 31.31335],
[120.586101, 31.313334],
[120.586118, 31.313165],
[120.586424, 31.314448],
[120.586466, 31.314068],
[120.586472, 31.31381],
[120.586494, 31.313578],
[120.586522, 31.313195],
],
distance: '',
},
{
id: 3,
path: [
[120.588191, 31.314226],
[120.587711, 31.314177],
[120.587691, 31.314343],
[120.587239, 31.314309],
[120.586816, 31.314399],
[120.586747, 31.314405],
[120.586738, 31.314469],
[120.586424, 31.314448],
[120.585995, 31.314408],
[120.585996, 31.314362],
[120.585862, 31.314356],
[120.585654, 31.314337],
[120.585534, 31.314196],
[120.585375, 31.314183],
[120.585192, 31.314135],
[120.585152, 31.314019],
[120.585285, 31.313893],
[120.585414, 31.313943],
[120.5856, 31.313955],
[120.585902, 31.313956],
],
distance: '',
},
{
id: 3,
path: [
[120.588191, 31.314226],
[120.587711, 31.314177],
[120.587691, 31.314343],
[120.587239, 31.314309],
[120.586816, 31.314399],
[120.586747, 31.314405],
[120.586738, 31.314469],
[120.586424, 31.314448],
[120.585995, 31.314403],
[120.586075, 31.313569],
[120.586086, 31.313265],
[120.586142, 31.313178],
],
distance: '',
},
{
id: 3,
path: [
[120.588191, 31.314226],
[120.587711, 31.314177],
[120.587691, 31.314343],
[120.587239, 31.314309],
[120.586816, 31.314399],
[120.586747, 31.314405],
[120.586738, 31.314469],
[120.586424, 31.314448],
[120.585995, 31.314403],
[120.585996, 31.314263],
[120.585906, 31.314257],
[120.585915, 31.313951],
[120.58566, 31.313935],
[120.585666, 31.313733],
[120.585695, 31.313533],
[120.585718, 31.313344],
[120.585752, 31.313091],
],
distance: '',
},
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-21 14:29:26
* @LastEditTime: 2023-07-24 22:27:44
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
* @Description: 公众地图主体页面
-->
<template>
<div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
......@@ -36,10 +36,14 @@
</div>
<div class="operate-bar-wrapper">
<div class="box-wrapper">
<!-- <div class="item" @click="setLocation">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
<div v-if="open_current_location" class="item" @click="handleLocation(true)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
style="vertical-align: middle;" />
</div> -->
</div>
<div v-else class="item" @click="handleLocation(false)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
style="vertical-align: middle;" />
</div>
<!-- <div class="item" @click="selectRoute">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
style="vertical-align: middle;" />
......@@ -62,7 +66,7 @@
关闭步行导航
</div>
<van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
<!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
<van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
<div class="popup-wrapper">
<div class="title">
......@@ -73,7 +77,7 @@
poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
:src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
</div>
</van-popup>
</van-popup> -->
<van-dialog v-model:show="dialog_show" title="温馨提示">
<div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div>
......@@ -106,8 +110,8 @@ import InfoWindowLite from '@/components/InfoWindowLite'
import InfoWindowWarn from '@/components/InfoWindowWarn'
import audioBackground from '@/components/audioBackground'
import { useRect } from '@vant/use';
import { mapAPI } from '@/api/map.js'
import wx from 'weixin-js-sdk'
const GPS = {
PI: 3.14159265358979324,
......@@ -196,7 +200,7 @@ export default {
current_lat: '',
current_route: '',
current_safe_route: '',
show_popup: false,
// show_popup: false,
dialog_show: false,
dialog_text: '',
walk_route: '',
......@@ -222,24 +226,24 @@ export default {
navList: [],
navKey: '',
markerSum: [], // marker合集
titleLayerSet: {
17: {
x: [109439, 109441],
y: [53519, 53521]
},
18: {
x: [218879, 218882],
y: [107039, 107042]
}
},
// titleLayerSet: {
// 17: {
// x: [109439, 109441],
// y: [53519, 53521]
// },
// 18: {
// x: [218879, 218882],
// y: [107039, 107042]
// }
// },
defaultZoom: 18,
defaultCenter: [120.587382, 31.313900],
mapTiles: []
mapTiles: [],
open_current_location: true,
}
},
async mounted() {
const code = this.$route.query.id;
// const code = '362800';
const { data } = await mapAPI({ i: code });
data.list = data.list.concat(map_alert);
this.navBarList = data.list; // 底部导航条
......@@ -249,25 +253,31 @@ export default {
// 初始化地图
this.initMap();
// this.setMapBoundary();
// 使用之前都要再获取一下地址
this.getLocation()
// 使用之前获取当前地址，判断当前是否能够获取经纬度
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: (res) => {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
},
});
// 设置贴片地图
this.setTitleLayer();
// 每隔5分钟刷新地图
setInterval(() => {
this.map.resize();
}, 1000 * 60 * 5);
},
watch: {
show_popup(val) {
if (!val) {
this.$nextTick(() => {
// 弹框关闭时，暂停视频
$('.vjs-tech')[0].pause();
$('.vjs-tech')[0].currentTime = 0;
})
}
},
// show_popup(val) {
// if (!val) {
// this.$nextTick(() => {
// // 弹框关闭时，暂停视频
// $('.vjs-tech')[0].pause();
// $('.vjs-tech')[0].currentTime = 0;
// })
// }
// },
showInfoWindow(val) {
if (val) {
// 元素的大小及其相对于视口的位置
......@@ -455,45 +465,115 @@ export default {
// fillColor: '#CFE7AA'
// });
// },
// isPointInRing() { // 是否在景区范围
// let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
// [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
// ]);
// return isPointInRing
// },
// setLocation() { // 开启定位服务
isPointInRing() { // 是否在景区范围
let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
]);
return isPointInRing
},
setLocation() { // 开启定位服务
// 获取失败
if (!this.current_lng || !this.current_lat) {
this.dialog_show = true;
this.dialog_text = '获取经纬度失败';
}
this.getLocation();
// // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
// if (!this.current_lng || !this.current_lat) {
// this.getLocation()
// } else {
// // 使用纠正偏移后的地址，打一个定位标记
// var marker = new AMap.Marker({
// position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// });
// this.map.add(marker);
// // 定位到地图中心-西园寺
// this.map.setCenter([120.587334, 31.314823]);
// // 判断是否在范围内
// if (!this.isPointInRing()) {
// this.dialog_show = true;
// this.dialog_text = '您不在景区范围内';
// } else {
// // this.current_lng = '120.587643'
// // this.current_lat = '31.314853'
// // 使用纠正偏移后的地址，打一个定位标记
// this.location_marker = new AMap.LabelMarker({
// icon: {
// image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
// anchor: 'bottom-center',
// size: [36, 36],
// },
// position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// });
// this.map.add(this.location_marker);
// // 定位到当前位置中心
// this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
// }
// }
// },
},
handleLocation(status) { // 打开/关闭 当前定位
if (status) {
this.setLocation()
this.open_current_location = false;
} else {
this.removeLocation()
this.open_current_location = true;
}
},
removeLocation() { // 移除定位标记
this.current_lng = '';
this.current_lat = '';
this.map.remove(this.location_marker); // 删除当前定位标记
},
getLocation() { // 获取经纬度
AMap.plugin(['AMap.Geolocation'], () => {
this.geolocation = new AMap.Geolocation(this.location_options);
this.geolocation.getCurrentPosition((status, result) => {
if (status === 'complete') {
let lat = result.position.lat;
let lng = result.position.lng;
// 行动路线
if (lng && lat) {
this.current_lng = GPS.gcj_encrypt(lat, lng).lon;
this.current_lat = GPS.gcj_encrypt(lat, lng).lat;
// AMap.plugin(['AMap.Geolocation'], () => {
// this.geolocation = new AMap.Geolocation(this.location_options);
// this.geolocation.getCurrentPosition((status, result) => {
// if (status === 'complete') {
// let lat = result.position.lat;
// let lng = result.position.lng;
// // 行动路线
// if (lng && lat) {
// // this.current_lng = GPS.gcj_encrypt(lat, lng).lon;
// // this.current_lat = GPS.gcj_encrypt(lat, lng).lat;
// this.current_lng = lng;
// this.current_lat = lat;
// }
// } else {
// console.warn('获取失败');
// }
// })
// });
// PC端无法获取定位
// 微信获取地址
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: (res) => {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
// 判断是否在范围内
if (!this.isPointInRing()) {
this.dialog_show = true;
this.dialog_text = '您不在景区范围内';
} else {
// 使用纠正偏移后的地址，打一个定位标记
this.location_marker = new AMap.LabelMarker({
icon: {
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
anchor: 'bottom-center',
size: [36, 36],
},
position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
this.map.add(this.location_marker);
// 定位到当前位置中心
this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
}
},
complete: () => {
// 获取失败
if (!this.current_lng || !this.current_lat) {
this.dialog_show = true;
this.dialog_text = '获取经纬度失败';
}
})
},
});
},
setZoom(type) { // 设置放大缩小地图
......@@ -691,20 +771,22 @@ export default {
zIndex: 50
})
this.map.add([this.current_route]);
this.location_marker = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
this.map.add([this.location_marker]);
// 获取定位打标记
this.setLocation();
// this.location_marker = new AMap.Marker({
// icon: new AMap.Icon({
// image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
// size: new AMap.Size(40, 40),
// // 图标所用图片大小
// imageSize: new AMap.Size(40, 40),
// // 图标取图偏移量
// imageOffset: new AMap.Pixel(0, 0)
// }),
// position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// anchor: 'bottom-center',
// offset: new AMap.Pixel(0, 0)
// });
// this.map.add([this.location_marker]);
// 关闭导航提示
this.show_walk_route = false;
},
......@@ -724,6 +806,29 @@ export default {
}
},
setTitleLayer() { // 生成瓦片图
// 获取瓦片图渲染范围
function getFirstProperty(obj) {
for (var prop in obj) {
return prop;
}
}
function getLastProperty(obj) {
var props = [];
for (var prop in obj) {
props.push(prop);
}
return props[props.length - 1];
}
let obj_scope = {};
for (const key in this.mapTiles) {
const element = this.mapTiles[key];
let first = getFirstProperty(element).split('-');
let last = getLastProperty(element).split('-');
obj_scope[key] = {
x: [first[0], last[0]],
y: [first[1], last[1]]
}
}
const _this = this;
var layer = new AMap.TileLayer.Flexible({
cacheSize: 50,
......@@ -731,9 +836,9 @@ export default {
zIndex: 100,
createTile: function (x, y, z, success, fail) {
// 控制地图等级显示图片范围-过滤不显示的图层渲染
for (const id in _this.titleLayerSet) {
for (const id in obj_scope) {
if (z == id) {
const scope = _this.titleLayerSet[id];
const scope = obj_scope[id];
if (x < scope.x[0] || x > scope.x[1]) {
fail()
return;
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-24 16:11:12
* @LastEditTime: 2023-07-25 05:53:53
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 地图主体页面
* @Description: 内部地图主体页面
-->
<template>
<div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
......@@ -36,8 +36,12 @@
</div>
<div class="operate-bar-wrapper">
<div class="box-wrapper">
<div class="item" @click="setLocation">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
<div v-if="open_current_location" class="item" @click="handleLocation(true)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
style="vertical-align: middle;" />
</div>
<div v-else class="item" @click="handleLocation(false)">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.25rem"
style="vertical-align: middle;" />
</div>
<div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
......@@ -58,7 +62,7 @@
关闭步行导航
</div>
<van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
<!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
<van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
<div class="popup-wrapper">
<div class="title">
......@@ -69,7 +73,7 @@
poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
:src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
</div>
</van-popup>
</van-popup> -->
<van-dialog v-model:show="dialog_show" title="温馨提示">
<div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div>
......@@ -86,8 +90,6 @@
<InfoWindowYard v-show="showInfoWindowYard" ref="infoWindowYard" :info-window="infoWindowYard" :info="itemInfo"
:rect="rect" @onLocation="infoWindowLocation"></InfoWindowYard>
<!-- <audioBackground></audioBackground> -->
<van-popup v-model:show="show_member_popup" position="bottom" :overlay="true" :style="{ padding: '1rem 0', height: '80%', background: '#F7F8FA' }">
<van-icon name="cross" size="1.35rem" @click="closeMember" style="float: right; color: gray; margin-right: 1rem;" />
<div id="member-list" class="popup-wrapper" style="clear: both;">
......@@ -129,11 +131,8 @@ import InfoWindow from '@/components/InfoWindow'
import InfoWindowLite from '@/components/InfoWindowLite'
import InfoWindowWarn from '@/components/InfoWindowWarn'
import InfoWindowYard from '@/components/InfoWindowYard'
import audioBackground from '@/components/audioBackground'
import { useRect } from '@vant/use';
import { mapAPI } from '@/api/map.js'
import wx from 'weixin-js-sdk'
const GPS = {
......@@ -197,33 +196,33 @@ export default {
data() {
return {
map: '',
location_options: {
'showButton': true, // 是否显示定位按钮
'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
},
enableHighAccuracy: true
},
// location_options: {
// 'showButton': true, // 是否显示定位按钮
// '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
// },
// enableHighAccuracy: true
// },
geolocation: '',
current_lng: '',
current_lat: '',
current_route: '',
current_safe_route: '',
show_popup: false,
// show_popup: false,
show_member_popup: false,
dialog_show: false,
dialog_text: '',
......@@ -234,9 +233,9 @@ export default {
route_safe_marker: [],
open_safe_route: true,
show_walk_route: true,
popup_title: '',
popup_content: '',
video_src: '',
// popup_title: '',
// popup_content: '',
// video_src: '',
show_nav_popup: false,
showInfoWindow: false,
showInfoWindowLite: false,
......@@ -265,6 +264,10 @@ export default {
defaultZoom: 18,
defaultCenter: [120.587382, 31.313900],
mapTiles: [],
open_current_location: true,
point_range: [ // 景区范围经纬度
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
]
}
},
async mounted() {
......@@ -279,21 +282,31 @@ export default {
// 初始化地图
this.initMap();
// this.setMapBoundary();
// 使用之前都要再获取一下地址
this.getLocation()
// 使用之前获取当前地址，判断当前是否能够获取经纬度
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: (res) => {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
},
});
// 设置贴片地图
this.setTitleLayer();
},
watch: {
show_popup(val) {
if (!val) {
this.$nextTick(() => {
// 弹框关闭时，暂停视频
$('.vjs-tech')[0].pause();
$('.vjs-tech')[0].currentTime = 0;
})
}
},
// show_popup(val) {
// if (!val) {
// this.$nextTick(() => {
// // 弹框关闭时，暂停视频
// $('.vjs-tech')[0].pause();
// $('.vjs-tech')[0].currentTime = 0;
// })
// }
// },
showInfoWindow(val) {
if (val) {
// 元素的大小及其相对于视口的位置
......@@ -381,49 +394,6 @@ export default {
} else {
marker_icon = entity_info[i].icon;
}
// var marker = new AMap.ElasticMarker({
// position: entity_info[i].position,
// zooms: [17, 20],
// styles: [{
// icon: {
// // img: marker_icon, // 标记点图标
// img: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', // 标记点图标
// size: [28, 28], // 可见区域的大小
// anchor: 'bottom-center', // 锚点
// fitZoom: 14, // 最合适的级别
// scaleFactor: 2, // 地图放大一级的缩放比例系数
// maxScale: 1.4, // 最大放大比例
// minScale: 0.8 // 最小放大比例
// },
// label: {
// content: entity_info[i].name,
// position: 'TM',
// // position: 'BM',
// // offset: new AMap.Pixel(0, 10),
// minZoom: 18
// }
// }, {
// icon: {},
// label: {}
// }],
// zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
// });
// if (clickListener) {
// marker.off('click', clickListener)
// }
// // 绑定景点的点击事件 - 文字出现才能触发
// var clickListener = marker.on('click', (e) => {
// // 不同弹框类型
// if (entity_info[i].window_type === 'normal') {
// this.positionMarker(entity_info[i])
// } else if(entity_info[i].window_type === 'lite') {
// this.positionLiteMarker(entity_info[i])
// } else if (entity_info[i].window_type === 'warn') {
// this.positionWarnMarker(entity_info[i])
// }
// })
// // marker合集
// this.markerSum.push(marker);
// 创建一个 LabelMarker 实例
var labelMarker = new AMap.LabelMarker({
position: entity_info[i].position,
......@@ -476,10 +446,9 @@ export default {
collision: true, // 该层内标注是否避让
allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注
});
// // 将 LabelMarker 实例添加到 LabelsLayer 上
// 将 LabelMarker 实例添加到 LabelsLayer 上
labelsLayer.add(labelMarker);
// 将 LabelsLayer 添加到地图上
// this.map.add(labelsLayer);
this.markerSum.push(labelMarker);
})
this.map.add(this.markerSum);
......@@ -499,25 +468,68 @@ export default {
// });
// },
isPointInRing() { // 是否在景区范围
let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
]);
let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], this.point_range);
return isPointInRing
},
setLocation() { // 开启定位服务
// this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
// 获取失败
if (!this.current_lng || !this.current_lat) {
this.getLocation()
this.dialog_show = true;
this.dialog_text = '获取经纬度失败';
}
this.getLocation();
},
handleLocation(status) { // 打开/关闭 当前定位
if (status) {
this.setLocation()
this.open_current_location = false;
} else {
this.removeLocation()
this.open_current_location = true;
}
},
removeLocation() { // 移除定位标记
this.current_lng = '';
this.current_lat = '';
this.map.remove(this.location_marker); // 删除当前定位标记
},
getLocation() { // 获取经纬度
// AMap.plugin(['AMap.Geolocation'], () => {
// this.geolocation = new AMap.Geolocation(this.location_options);
// this.geolocation.getCurrentPosition((status, result) => {
// if (status === 'complete') {
// let lat = result.position.lat;
// let lng = result.position.lng;
// // 行动路线
// if (lng && lat) {
// // this.current_lng = GPS.gcj_encrypt(lat, lng).lon;
// // this.current_lat = GPS.gcj_encrypt(lat, lng).lat;
// this.current_lng = lng;
// this.current_lat = lat;
// }
// } else {
// console.warn('获取失败');
// }
// })
// });
// PC端无法获取定位
// 微信获取地址
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: (res) => {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
// 判断是否在范围内
if (!this.isPointInRing()) {
this.dialog_show = true;
this.dialog_text = '您不在景区范围内';
} else {
// this.current_lng = '120.587643'
// this.current_lat = '31.314853'
// 使用纠正偏移后的地址，打一个定位标记
var marker = new AMap.LabelMarker({
this.location_marker = new AMap.LabelMarker({
icon: {
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
anchor: 'bottom-center',
......@@ -525,43 +537,18 @@ export default {
},
position: new AMap.LngLat(this.current_lng, this.current_lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
this.map.add(marker);
// 定位到地图中心-西园寺
this.map.add(this.location_marker);
// 定位到当前位置中心
this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
}
}
},
getLocation() { // 获取经纬度
AMap.plugin(['AMap.Geolocation'], () => {
this.geolocation = new AMap.Geolocation(this.location_options);
this.geolocation.getCurrentPosition((status, result) => {
if (status === 'complete') {
let lat = result.position.lat;
let lng = result.position.lng;
// 行动路线
if (lng && lat) {
// this.current_lng = GPS.gcj_encrypt(lat, lng).lon;
// this.current_lat = GPS.gcj_encrypt(lat, lng).lat;
this.current_lng = lng;
this.current_lat = lat;
}
} else {
console.warn('获取失败');
}
})
});
// 微信获取地址
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: (res) => {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
console.warn(this.current_lng, this.current_lat);
complete: () => {
// 获取失败
if (!this.current_lng || !this.current_lat) {
this.dialog_show = true;
this.dialog_text = '获取经纬度失败';
}
},
});
},
setZoom(type) { // 设置放大缩小地图
......@@ -758,20 +745,22 @@ export default {
zIndex: 50
})
this.map.add([this.current_route]);
this.location_marker = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
size: new AMap.Size(40, 40),
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
this.map.add([this.location_marker]);
// 获取定位打标记
this.setLocation();
// this.location_marker = new AMap.Marker({
// icon: new AMap.Icon({
// image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
// size: new AMap.Size(40, 40),
// // 图标所用图片大小
// imageSize: new AMap.Size(40, 40),
// // 图标取图偏移量
// imageOffset: new AMap.Pixel(0, 0)
// }),
// position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// anchor: 'bottom-center',
// offset: new AMap.Pixel(0, 0)
// });
// this.map.add([this.location_marker]);
// 关闭导航提示
this.show_walk_route = false;
},
......@@ -935,13 +924,6 @@ export default {
// this.show_walk_route = true;
// },
infoWindowLocation(path) { // 监听前往按钮回调
// TODO: 实际获取精确定位后导航到位置
// // 判断是否在范围内
// if (!this.isPointInRing()) {
// this.dialog_show = true;
// } else {
// this.setWalkRoute({ lng: this.current_lng, lat: this.current_lat }, { lng: position[0], lat: position[1] })
// }
// if (this.walk_route) { // 清除前一条步行导航
// this.walk_route.clear();
// }
......