mapbox点击图片弹出对话框

<template>

<div >

<div id='mapDiv'></div>

</div>

</template>

<script>

export default {

name: "Map",

data() {

return {

};

},

mounted(){

var map;

var zoom = 8;

var layBottom, layTop;

var infoWin;

let description = null;

//综合办机构

var markerCode = true;

window.mapDiv = this.onLoad();

},

methods: {

onLoad(){

//影像地图

this.$mapboxgl.accessToken ="your token";

let map = new this.$mapboxgl.Map({

container: 'mapDiv',

style: 'mapbox://styles/mapbox/streets-v11',

center: [122.09316, 46.07282], //地图中心点

zoom: 9

});

let _this = this

map.on('load', ()=> {

map.loadImage('https://iconfont.alicdn.com/t/a73e6cd3-6ed0-4066-b2a2-4143493d22cd.png',(error, image) => {

if (error) throw error;

map.addImage('build', image);

map.addSource('point', {

'type': 'geojson',

'data': {

'type': 'FeatureCollection',

'features': [

{

                     'type': 'Feature',

                     'geometry': {

                     'type': 'Point',

                     'coordinates': [122.09316, 46.07282],//添加图片的经纬度

                     },

}

                     ]

}

});

map.addLayer({

'id': 'points',

'type': 'symbol',

'source': 'point',

'layout': {

'icon-image': 'build',

'icon-size': 0.25

}

});

//添加点击方法

                    map.on('click',function (e) {

                        let showInfo = null;

//根据当前点击地方经纬度与存在的经纬度匹配，如果匹配上就

var coordinates =map.queryRenderedFeatures(e.point,{

laters:['']

});//写死的图片位置的经纬度

const feature = coordinates[0];

if(feature == undefined || feature.geometry == undefined || feature.geometry.type!='Point') return;

                            showInfo = '<div class="makerTop"><h2 class="markerHear" > 综合办一处 </h2></div>' +

'<div class="markerBody" ><p>设在单位：兴安盟乌兰浩特市市政府</p>' +

'<p>详细地址：兴安盟乌兰浩特市</p>' +

'<p>负&ensp;责&ensp;人：杨子林</p>' +

'<p>军&emsp;&emsp;电：0311-2564558</p></div>'

new _this.$mapboxgl.Popup()

.setLngLat(feature.geometry.coordinates)

.setHTML(showInfo)

.addTo(map);

});

}

);

});

},

},

};

</script>

<style scoped>

@import url(https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css);

@import url(https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css);

#mapDiv {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

width: 1920px;

height: 1080px;

background: rgba(0, 0, 0, 0.5);

z-index: -1;

}

.btns {

float: left;

/* width: 100px; */

height: 32px;

z-index: 555;

background-image: url('../assets/img/icon/fd.png');

background-size: 100% 100%;

border-radius: 10px;

text-align: center;

cursor: pointer;

margin-top: 100px;

margin-left: 490px;

line-height: 32px;

color: #fff;

padding: 0 20px;

font-size: 15px;

}

.btns.active {

background-image: url('../assets/img/icon/btn.png');

}

.tdt-infowindow-content-wrapper {

background-color: #091223 !important;

min-width: 280px !important;

}

.tdt-infowindow-content-wrapper {

padding: 0 !important;

}

.tdt-infowindow-content {

margin: 0 !important;

}

.tdt-container a.tdt-infowindow-close-button {

top: 8px !important;

right: 5px !important;

}

.tdt-infowindow-tip {

background-color: #091223 !important;

}

.mapboxgl-popup-content {

padding: 0

}

.mapboxgl-popup-close-button {

position: absolute;

right: 0;

top: 0;

color: #fff;

width: 40px;

font-size: 22px;

height: 40px;

border: 0;

border-radius: 0 3px 0 0;

cursor: pointer;

background-color: transparent;

}

.makerTop {

background-image: url("../assets/img/icon/farm.png");

background-size: 100% 100%;

display: flex;

border: solid 1px #052f66;

align-items: center;

border-bottom: none;

}

.markerHear {

width: 80%;

font-size: 15px;

line-height: 37px;

padding-left: 12px;

color: #fff;

height: 37px;

overflow: hidden;

margin: 0;

}

.markerBody {

background-color: #091324;

padding: 8px 12px;

border: solid 1px #052f66;

border-top: none;

}

.markerBody p {

font-size: 14px;

margin: 0 !important;

line-height: 30px;

color: #fff;

}

</style>