This commit is contained in:
parent
e226d2936d
commit
a2eddacc9c
|
|
@ -19,6 +19,11 @@
|
||||||
<view class="verticalLine"></view>
|
<view class="verticalLine"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="myposition" @click="setcenter" v-if="showmap">
|
||||||
|
<uni-icons type="map-pin-ellipse" size="20rpx"></uni-icons>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<view class="right">
|
<view class="right">
|
||||||
<scroll-view :scroll-y="true" class="box" :scroll-top="scroll">
|
<scroll-view :scroll-y="true" class="box" :scroll-top="scroll">
|
||||||
<view class="title">预警设置</view>
|
<view class="title">预警设置</view>
|
||||||
|
|
@ -107,7 +112,6 @@
|
||||||
|
|
||||||
<!-- renderjs 嵌入百度地图了 -->
|
<!-- renderjs 嵌入百度地图了 -->
|
||||||
<script module="mapbaidu" lang="renderjs">
|
<script module="mapbaidu" lang="renderjs">
|
||||||
|
|
||||||
let BAIDUKEY = "LuRvyI4RAQNUQzVYE0Z8negUY3AD3dOo";
|
let BAIDUKEY = "LuRvyI4RAQNUQzVYE0Z8negUY3AD3dOo";
|
||||||
let suspend = false;
|
let suspend = false;
|
||||||
let timing;
|
let timing;
|
||||||
|
|
@ -135,27 +139,31 @@
|
||||||
methods: {
|
methods: {
|
||||||
createMap(fn = function() {}) {
|
createMap(fn = function() {}) {
|
||||||
// 加载百度地图JS
|
// 加载百度地图JS
|
||||||
|
console.log("开始加载地图")
|
||||||
|
let _this = this;
|
||||||
window.BMAP_PROTOCOL = "https";
|
window.BMAP_PROTOCOL = "https";
|
||||||
window.BMapGL_loadScriptTime = new Date().getTime();
|
window.BMapGL_loadScriptTime = (new Date).getTime();
|
||||||
var script = document.createElement('script');
|
window.BMapGL = window.BMapGL || {};
|
||||||
script.type = 'text/javascript';
|
window.BMapGL.apiLoad = function() {
|
||||||
script.src =
|
console.log("地图加载完毕")
|
||||||
`https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${BAIDUKEY}&services=&t=2025082517022`;
|
delete window.BMapGL.apiLoad;
|
||||||
document.body.appendChild(script);
|
console.log("创还能地图实例")
|
||||||
|
_map = new BMapGL.Map('baiduimap'); // 创建Map实例
|
||||||
var script = document.createElement('script');
|
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐
|
||||||
script.type = 'text/javascript';
|
_map.centerAndZoom(point, 13);
|
||||||
script.src =
|
_map.enableScrollWheelZoom();
|
||||||
`https://api.map.baidu.com/getscript?v=3.0&ak=${BAIDUKEY}&services=&t=2025082517022`;
|
console.log("创建完毕")
|
||||||
document.body.appendChild(script);
|
|
||||||
script.onload=function(){
|
|
||||||
fn()
|
fn()
|
||||||
}
|
};
|
||||||
var link = document.createElement("link");
|
var s = document.createElement('script');
|
||||||
link.rel = "stylesheet";
|
s.src =
|
||||||
link.type = "text/css";
|
`https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${BAIDUKEY}&services=&t=${window.BMapGL_loadScriptTime}`;
|
||||||
link.href = "https://api.map.baidu.com/res/webgl/10/bmap.css";
|
document.body.appendChild(s);
|
||||||
document.body.appendChild(link);
|
var link = document.createElement('link');
|
||||||
|
link.setAttribute('rel', 'stylesheet');
|
||||||
|
link.setAttribute('type', 'text/css');
|
||||||
|
link.setAttribute('href', 'https://api.map.baidu.com/res/webgl/10/bmap.css');
|
||||||
|
document.getElementsByTagName('head')[0].appendChild(link);
|
||||||
|
|
||||||
// 加载点位样式
|
// 加载点位样式
|
||||||
var style = document.createElement('style');
|
var style = document.createElement('style');
|
||||||
|
|
@ -200,32 +208,11 @@
|
||||||
|
|
||||||
document.head.appendChild(style);
|
document.head.appendChild(style);
|
||||||
},
|
},
|
||||||
init(e) {
|
|
||||||
let _this = this;
|
|
||||||
|
|
||||||
if (typeof BMapGL != "undefined") {
|
|
||||||
_map = new BMapGL.Map('baiduimap'); // 创建Map实例
|
|
||||||
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐
|
|
||||||
_map.centerAndZoom(point, 13);
|
|
||||||
_map.enableScrollWheelZoom();
|
|
||||||
// 回执
|
|
||||||
if(e){
|
|
||||||
if(typeof e == "function"){
|
|
||||||
e()
|
|
||||||
}else{
|
|
||||||
this.mapsetEmit({
|
|
||||||
type: e.type,
|
|
||||||
data: {}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
clearmap(e) {
|
clearmap(e) {
|
||||||
if(_map){_map.clearOverlays()}
|
if (_map) {
|
||||||
|
_map.clearOverlays()
|
||||||
|
}
|
||||||
|
|
||||||
this.marker2 = {
|
this.marker2 = {
|
||||||
el: "",
|
el: "",
|
||||||
|
|
@ -243,10 +230,16 @@
|
||||||
},
|
},
|
||||||
setcenter(e) {
|
setcenter(e) {
|
||||||
if (_map) {
|
if (_map) {
|
||||||
var point = new BMapGL.Point(e.longitude, e.latitude);
|
var point;
|
||||||
|
if (e.type) {
|
||||||
|
point = new BMapGL.Point(e.data.longitude, e.data.latitude);
|
||||||
|
} else {
|
||||||
|
point = new BMapGL.Point(e.longitude, e.latitude);
|
||||||
|
}
|
||||||
_map.setCenter(point);
|
_map.setCenter(point);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
showsetcenter(e) {
|
showsetcenter(e) {
|
||||||
if (_map) {
|
if (_map) {
|
||||||
console.log(6666666)
|
console.log(6666666)
|
||||||
|
|
@ -402,6 +395,7 @@
|
||||||
_map.addOverlay(customOverlay);
|
_map.addOverlay(customOverlay);
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setpoint(e) {
|
setpoint(e) {
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -412,10 +406,8 @@
|
||||||
|
|
||||||
|
|
||||||
// 设置坐标信息
|
// 设置坐标信息
|
||||||
|
if (e.data.point1.point) {
|
||||||
this.marker1.point = e.data.point1.point;
|
this.marker1.point = e.data.point1.point;
|
||||||
this.marker2.point = e.data.point2.point;
|
|
||||||
|
|
||||||
|
|
||||||
// 绘制坐标
|
// 绘制坐标
|
||||||
function createDOM() {
|
function createDOM() {
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
|
|
@ -429,6 +421,13 @@
|
||||||
`
|
`
|
||||||
return div
|
return div
|
||||||
}
|
}
|
||||||
|
var customOverlay = new BMapGL.CustomOverlay(createDOM, {
|
||||||
|
point: new BMapGL.Point(this.marker1.point.lng, this.marker1.point.lat)
|
||||||
|
})
|
||||||
|
_map.addOverlay(customOverlay);
|
||||||
|
}
|
||||||
|
if (e.data.point2.point) {
|
||||||
|
this.marker2.point = e.data.point2.point;
|
||||||
|
|
||||||
function createDOM1() {
|
function createDOM1() {
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
|
|
@ -442,51 +441,36 @@
|
||||||
`
|
`
|
||||||
return div
|
return div
|
||||||
}
|
}
|
||||||
var customOverlay = new BMapGL.CustomOverlay(createDOM, {
|
|
||||||
point: new BMapGL.Point(this.marker1.point.lng, this.marker1.point.lat)
|
|
||||||
})
|
|
||||||
var customOverlay2 = new BMapGL.CustomOverlay(createDOM1, {
|
var customOverlay2 = new BMapGL.CustomOverlay(createDOM1, {
|
||||||
point: new BMapGL.Point(this.marker2.point.lng, this.marker2.point.lat)
|
point: new BMapGL.Point(this.marker2.point.lng, this.marker2.point.lat)
|
||||||
})
|
})
|
||||||
_map.addOverlay(customOverlay2);
|
_map.addOverlay(customOverlay2);
|
||||||
_map.addOverlay(customOverlay);
|
}
|
||||||
this.drawpolyline(e);
|
|
||||||
|
|
||||||
|
if (this.marker2.point && this.marker1.point) {
|
||||||
|
this.drawpolyline(e);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// renderjs 和页面通讯相关方法
|
// renderjs 和页面通讯相关方法
|
||||||
mapgetEmit(e) {
|
mapgetEmit(e) {
|
||||||
let _this = this;
|
let _this = this;
|
||||||
if (e.type) {
|
if (e.type) {
|
||||||
// 处理无网络打开应用地图二次加载
|
// 处理无网络打开应用地图二次加载
|
||||||
if(typeof BMapGL == "undefined"){
|
if (!_map) {
|
||||||
console.log(typeof BMapGL)
|
|
||||||
_this.createMap(function() {
|
_this.createMap(function() {
|
||||||
// 延迟一会确保JS加载 完毕
|
|
||||||
|
|
||||||
setTimeout(()=>{
|
|
||||||
_this.init(function(){
|
|
||||||
_this[e.type](e);
|
_this[e.type](e);
|
||||||
})
|
})
|
||||||
},1500)
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
if(typeof BMapGL != "undefined" && !_map){
|
|
||||||
this.init(()=>{
|
|
||||||
this[e.type](e);
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
if (_map) {
|
||||||
if(typeof BMapGL != "undefined" && _map){
|
|
||||||
if (e.type && suspend == false) {
|
if (e.type && suspend == false) {
|
||||||
suspend = true;
|
suspend = true;
|
||||||
this[e.type](e);
|
_this[e.type](e);
|
||||||
console.log(e.type)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
clearTimeout(timing)
|
clearTimeout(timing)
|
||||||
// 一秒没回馈清除
|
// 一秒没回馈清除
|
||||||
timing = setTimeout(function() {
|
timing = setTimeout(function() {
|
||||||
|
|
@ -618,15 +602,32 @@
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
load() {
|
load() {
|
||||||
console.log('load')
|
|
||||||
// this.setEmit({
|
|
||||||
// type: "init",
|
|
||||||
// data: {}
|
|
||||||
// }, () => {
|
|
||||||
// this.show()
|
|
||||||
// })
|
|
||||||
},
|
},
|
||||||
hide() {
|
hide() {},
|
||||||
|
setcenter() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: "....."
|
||||||
|
})
|
||||||
|
uni.getLocation({
|
||||||
|
type: "gcj02",
|
||||||
|
success: (res) => {
|
||||||
|
this.setEmit({
|
||||||
|
type: "setcenter",
|
||||||
|
data: {
|
||||||
|
...res,
|
||||||
|
type: this.type,
|
||||||
|
id: this.pointPosition1.id
|
||||||
|
}
|
||||||
|
}, () => {
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
complete() {
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
show() {
|
show() {
|
||||||
let _this = this;
|
let _this = this;
|
||||||
|
|
@ -804,6 +805,17 @@
|
||||||
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.myposition {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 22222222;
|
||||||
|
right: calc(50% + 20rpx);
|
||||||
|
bottom: 15rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
padding: 5rpx;
|
||||||
|
box-shadow: 0px 0px 10rpx 1rpx rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
.punctuation {
|
.punctuation {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue