From 72c9ddc3256c4cd4c3db2bd1fb2510bc29bb2515 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期四, 06 七月 2023 08:48:18 +0800
Subject: [PATCH] 地图标点
---
src/pages/show/showIndex/showIndex.vue | 180 +++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 131 insertions(+), 49 deletions(-)
diff --git a/src/pages/show/showIndex/showIndex.vue b/src/pages/show/showIndex/showIndex.vue
index 02ec8b2..e291947 100644
--- a/src/pages/show/showIndex/showIndex.vue
+++ b/src/pages/show/showIndex/showIndex.vue
@@ -1,12 +1,13 @@
<template>
<div class="showIndex-wrap">
<div class="mapBox">
- <baidu-map
- :center="center"
- :zoom="zoom"
- class="bm-view"
- @ready="handler">
- </baidu-map>
+<!-- <baidu-map-->
+<!-- :center="center"-->
+<!-- :zoom="zoom"-->
+<!-- class="bm-view"-->
+<!-- @ready="handler">-->
+<!-- </baidu-map>-->
+ <div class="map" id="map"></div>
<!--<div class="map_container" id="map_container"></div>-->
</div>
<div class="upload-box">
@@ -56,10 +57,11 @@
center: { lng: 118.20, lat: 39.63},
zoom: 6,
mapObj:{},
- mapData:[],
mapData2:[],
uploadVisiable:false, //涓婁紶鏂囦欢寮规
- timer:null
+ timer:null,
+ mapData:[],
+ map:''
}
},
destroyed() {
@@ -68,11 +70,28 @@
mounted() {
//this.getMapData()
//this.initMap()
- this.timer = setInterval(() => {
- this.getMapData()
- },300000)
+ this.$nextTick(() => {
+ this.initMap()
+ })
+
+
+ // this.timer = setInterval(() => {
+ // this.getMapData()
+ // },300000)
+
},
methods: {
+ initMap() {
+ this.map = new window.BMap.Map("map");
+ console.log(map,'map===')
+ this.map.centerAndZoom(new BMap.Point(118.183450598,39.6505309225), 11)
+ //map.enableScrollWheelZoom(true) //榧犳爣婊氬姩缂╂斁
+ this.map.setCurrentCity('鍞愬北') // 璁剧疆鍦板浘鏄剧ず鐨勫煄甯� 姝ら」鏄繀椤昏缃殑
+ this.map.enableScrollWheelZoom(true) //寮�鍚紶鏍囨粴杞缉鏀�
+ //this.getMapData()
+ this.addMarker()
+
+ },
uploadClick(type) {
console.log(type,'type===')
this.uploadVisiable = true
@@ -88,28 +107,71 @@
}
})
},
- handler({BMap, map}) {
- this.mapObj = {BMap, map}
- let goodsData = require('../../../assets/js/custom_map_config2')
- let point = new BMap.Point(118.183450598,39.6505309225)
- map.centerAndZoom(point, 15)
- map.enableScrollWheelZoom(true) //榧犳爣婊氬姩缂╂斁
- map.setMapStyleV2({
- styleJson: goodsData
- // styleId: '5f9b8a9639cf6e4ae8806379bedba141'
- // style: 'bluish'
- })
- map.setCurrentCity('鍞愬北') // 璁剧疆鍦板浘鏄剧ず鐨勫煄甯� 姝ら」鏄繀椤昏缃殑
- this.getMapData()
-
- },
+ // handler({BMap, map}) {
+ // this.mapObj = {BMap, map}
+ // //let goodsData = require('../../../assets/js/custom_map_config2')
+ // let point = new BMap.Point(118.183450598,39.6505309225)
+ // map.centerAndZoom(point, 11)
+ // map.enableScrollWheelZoom(true) //榧犳爣婊氬姩缂╂斁
+ // // map.setMapStyleV2({
+ // // styleJson: goodsData
+ // // // styleId: '5f9b8a9639cf6e4ae8806379bedba141'
+ // // // style: 'bluish'
+ // // })
+ // map.setCurrentCity('鍞愬北') // 璁剧疆鍦板浘鏄剧ず鐨勫煄甯� 姝ら」鏄繀椤昏缃殑
+ // this.getMapData()
+ //
+ // },
addMarker() {
- let BMap = this.mapObj.BMap
- let map = this.mapObj.map
+ let BMap = window.BMap
+ this.map.clearOverlays() // 娓呴櫎鍦板浘涓婃墍鏈夎鐩栫墿
+ //let map = new window.BMap.Map("map");
+ let mapMarkers = []
+ this.mapData = [{
+ lon:118.167201,
+ lat:39.60944,
+ address: '娌冲寳鐪佸攼灞卞競寮�骞冲尯涓滆タ澶ц199鍙�',
+ health: '0'
+ },{
+ lon:118.15782,
+ lat:39.63102,
+ address: '娌冲寳鐪佸攼灞卞競璺崡鍖烘柊鍗庤タ閬�76鍙�4灞�',
+ health: '0'
+ },{
+ lon:118.09289,
+ lat:39.58163,
+ address: '娌冲寳鐪佸攼灞卞競涓板崡鍖烘鑻戝ぇ琛�7鍙�',
+ health: '0'
+ },{
+ lon:118.145069,
+ lat:39.662586,
+ address: '娌冲寳鐪佸攼灞卞競涓版鼎鍖烘浌闆姽澶ц17鍙�',
+ health: '0'
+ },{
+ lon:118.45153,
+ lat:39.74049,
+ address: '娌冲寳鐪佸攼灞卞競鍙ゅ喍鍖烘案鐩涜矾',
+ health: '0'
+ }]
+ // this.mapData.forEach(item => {
+ // let marker = new BMap.Marker(item.lon,item.lat)
+ // mapMarkers.push(marker)
+ // this.mapObj.map.addOverlay(marker)
+ // })
+ // let markerClusterer = new BMapLib.MarkerClusterer(this.mapObj.map, {
+ // markers: mapMarkers,
+ // styles: [
+ // {
+ // url: "./static/img/markerIcon3",
+ // size: new BMap.Size(35, 35),
+ // },
+ // ],
+ // })
+ // markerClusterer.setMinClusterSize(2)
this.mapData.forEach(item => { //lng 缁忓害 lat 缁忓害
console.log(this.mapData,'this.mapData===')
- if(item.lat && item.lat) {
+ if(item.lon && item.lat) {
let longitude = item.lon
console.log(item.lon,'缁忕含----')
console.log(item.lat,'缁忕含----')
@@ -129,8 +191,8 @@
let point = new BMap.Point(longitude,latitude)
let marker = new BMap.Marker(point,{icon:myIcon})
- map.addOverlay(marker)
- map.setZoom(13)
+ this.map.addOverlay(marker)
+ this.map.setZoom(11)
// 娣诲姞榧犳爣鍒掑叆鍧愭爣鐐圭殑鏄剧ず鍐呭
let isH = ''
if(item.health == 0) {
@@ -162,25 +224,41 @@
// 榛樿涓嶆樉绀烘枃鏈爣娉�
label.hide()
// 鍦ㄥ叏鏅満鏅唴娣诲姞瑕嗙洊鐗�
- map.addOverlay(label);
- marker.addEventListener('mouseover', function () {
- console.log(marker,'marker==')
- //榧犳爣绉诲叆鍔ㄧ敾
- let divElement = document.createElement('div')
- divElement.className = 'before'
- let divElement2 = document.createElement('div')
- divElement2.className = 'after'
- marker.hd.innerHtml = marker.hd.childNodes[0]
- marker.hd.appendChild(divElement)
- marker.hd.appendChild(divElement2)
- marker.hd.className = ''
- marker.hd.className = 'mapBGFault'
- label.show()
+ this.map.addOverlay(label);
+
+
+ marker.addEventListener("click", (e)=> {
+ let p = e.target;
+ let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
+ let infoWindow = new BMap.InfoWindow(str, {
+ // width: 320, // 淇℃伅绐楀彛瀹藉害
+ // height: 200, // 淇℃伅绐楀彛楂樺害
+ // title: '鐩戞帶淇℃伅', // 淇℃伅绐楀彛鏍囬ee
+ enableMessage: false, //璁剧疆鍏佽淇℃伅绐楀彂閫佺煭鎭�
+ str,
+ }); // 鍒涘缓淇℃伅绐楀彛瀵硅薄
+ this.map.openInfoWindow(infoWindow, point); //寮�鍚俊鎭獥鍙�
})
- marker.addEventListener('mouseout', function () {
- marker.hd.className = ''
- label.hide()
- })
+
+ // marker.addEventListener('mouseover', function () {
+ // alert(marker)
+ // console.log(marker,'marker==')
+ // //榧犳爣绉诲叆鍔ㄧ敾
+ // let divElement = document.createElement('div')
+ // divElement.className = 'before'
+ // let divElement2 = document.createElement('div')
+ // divElement2.className = 'after'
+ // marker.hd.innerHtml = marker.hd.childNodes[0]
+ // marker.hd.appendChild(divElement)
+ // marker.hd.appendChild(divElement2)
+ // marker.hd.className = ''
+ // marker.hd.className = 'mapBGFault'
+ // label.show()
+ // })
+ // marker.addEventListener('mouseout', function () {
+ // marker.hd.className = ''
+ // label.hide()
+ // })
}
})
@@ -248,6 +326,10 @@
top: -0.4167rem /* -80/192 */;
bottom: 0;
right: 0;
+ .map{
+ width: 100%;
+ height: 100%;
+ }
.map_container{
width: 100%;
height: 100%;
--
Gitblit v1.9.1