This commit is contained in:
parent
e226d2936d
commit
a2eddacc9c
|
|
@ -19,6 +19,11 @@
|
|||
<view class="verticalLine"></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">
|
||||
<scroll-view :scroll-y="true" class="box" :scroll-top="scroll">
|
||||
<view class="title">预警设置</view>
|
||||
|
|
@ -107,7 +112,6 @@
|
|||
|
||||
<!-- renderjs 嵌入百度地图了 -->
|
||||
<script module="mapbaidu" lang="renderjs">
|
||||
|
||||
let BAIDUKEY = "LuRvyI4RAQNUQzVYE0Z8negUY3AD3dOo";
|
||||
let suspend = false;
|
||||
let timing;
|
||||
|
|
@ -135,27 +139,31 @@
|
|||
methods: {
|
||||
createMap(fn = function() {}) {
|
||||
// 加载百度地图JS
|
||||
console.log("开始加载地图")
|
||||
let _this = this;
|
||||
window.BMAP_PROTOCOL = "https";
|
||||
window.BMapGL_loadScriptTime = new Date().getTime();
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src =
|
||||
`https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${BAIDUKEY}&services=&t=2025082517022`;
|
||||
document.body.appendChild(script);
|
||||
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src =
|
||||
`https://api.map.baidu.com/getscript?v=3.0&ak=${BAIDUKEY}&services=&t=2025082517022`;
|
||||
document.body.appendChild(script);
|
||||
script.onload=function(){
|
||||
window.BMapGL_loadScriptTime = (new Date).getTime();
|
||||
window.BMapGL = window.BMapGL || {};
|
||||
window.BMapGL.apiLoad = function() {
|
||||
console.log("地图加载完毕")
|
||||
delete window.BMapGL.apiLoad;
|
||||
console.log("创还能地图实例")
|
||||
_map = new BMapGL.Map('baiduimap'); // 创建Map实例
|
||||
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐
|
||||
_map.centerAndZoom(point, 13);
|
||||
_map.enableScrollWheelZoom();
|
||||
console.log("创建完毕")
|
||||
fn()
|
||||
}
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.type = "text/css";
|
||||
link.href = "https://api.map.baidu.com/res/webgl/10/bmap.css";
|
||||
document.body.appendChild(link);
|
||||
};
|
||||
var s = document.createElement('script');
|
||||
s.src =
|
||||
`https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${BAIDUKEY}&services=&t=${window.BMapGL_loadScriptTime}`;
|
||||
document.body.appendChild(s);
|
||||
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');
|
||||
|
|
@ -200,32 +208,11 @@
|
|||
|
||||
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) {
|
||||
if(_map){_map.clearOverlays()}
|
||||
if (_map) {
|
||||
_map.clearOverlays()
|
||||
}
|
||||
|
||||
this.marker2 = {
|
||||
el: "",
|
||||
|
|
@ -243,10 +230,16 @@
|
|||
},
|
||||
setcenter(e) {
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
showsetcenter(e) {
|
||||
if (_map) {
|
||||
console.log(6666666)
|
||||
|
|
@ -402,6 +395,7 @@
|
|||
_map.addOverlay(customOverlay);
|
||||
|
||||
},
|
||||
|
||||
setpoint(e) {
|
||||
|
||||
|
||||
|
|
@ -412,10 +406,8 @@
|
|||
|
||||
|
||||
// 设置坐标信息
|
||||
if (e.data.point1.point) {
|
||||
this.marker1.point = e.data.point1.point;
|
||||
this.marker2.point = e.data.point2.point;
|
||||
|
||||
|
||||
// 绘制坐标
|
||||
function createDOM() {
|
||||
var div = document.createElement('div');
|
||||
|
|
@ -429,6 +421,13 @@
|
|||
`
|
||||
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() {
|
||||
var div = document.createElement('div');
|
||||
|
|
@ -442,51 +441,36 @@
|
|||
`
|
||||
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, {
|
||||
point: new BMapGL.Point(this.marker2.point.lng, this.marker2.point.lat)
|
||||
})
|
||||
_map.addOverlay(customOverlay2);
|
||||
_map.addOverlay(customOverlay);
|
||||
this.drawpolyline(e);
|
||||
}
|
||||
|
||||
if (this.marker2.point && this.marker1.point) {
|
||||
this.drawpolyline(e);
|
||||
}
|
||||
},
|
||||
// renderjs 和页面通讯相关方法
|
||||
mapgetEmit(e) {
|
||||
let _this = this;
|
||||
if (e.type) {
|
||||
// 处理无网络打开应用地图二次加载
|
||||
if(typeof BMapGL == "undefined"){
|
||||
console.log(typeof BMapGL)
|
||||
if (!_map) {
|
||||
_this.createMap(function() {
|
||||
// 延迟一会确保JS加载 完毕
|
||||
|
||||
setTimeout(()=>{
|
||||
_this.init(function(){
|
||||
_this[e.type](e);
|
||||
})
|
||||
},1500)
|
||||
})
|
||||
}
|
||||
if(typeof BMapGL != "undefined" && !_map){
|
||||
this.init(()=>{
|
||||
this[e.type](e);
|
||||
})
|
||||
|
||||
}
|
||||
if(typeof BMapGL != "undefined" && _map){
|
||||
if (_map) {
|
||||
if (e.type && suspend == false) {
|
||||
suspend = true;
|
||||
this[e.type](e);
|
||||
console.log(e.type)
|
||||
_this[e.type](e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
clearTimeout(timing)
|
||||
// 一秒没回馈清除
|
||||
timing = setTimeout(function() {
|
||||
|
|
@ -618,15 +602,32 @@
|
|||
})
|
||||
},
|
||||
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() {
|
||||
let _this = this;
|
||||
|
|
@ -804,6 +805,17 @@
|
|||
|
||||
|
||||
<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 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue