本文實例為大家分享了vue-openlayers實現地圖坐標彈框的具體代碼，供大家參考，具體內容如下

openlayers

這個效果是點擊地圖，彈出坐標信息。

點擊地圖邊緣時，底圖會跟著移動，使彈窗能完整顯示出來。

<template> <div class='vm'> <h2 class='h-title'>彈窗 popup</h2> <div class='map-x'></div> <!-- 彈窗元素 --> <div ref='popup' v-show='currentCoordinate' > <span @click='closePopup'>✖</span> <div class='content'>{{currentCoordinate}}</div> </div> </div></template> <script>import ’ol/ol.css’import { Map, View } from ’ol’import Tile from ’ol/layer/Tile’import OSM from ’ol/source/OSM’import { toStringHDMS } from ’ol/coordinate’import { toLonLat } from ’ol/proj’import Overlay from ’ol/Overlay’ export default { name: ’Popup’, data () { return { map: null, currentCoordinate: null, // 彈窗坐標數據 overlay: null } }, methods: { initMap () { // 彈窗 this.overlay = new Overlay({ element: this.$refs.popup, // 彈窗標簽，在html里 autoPan: true, // 如果彈窗在底圖邊緣時，底圖會移動 autoPanAnimation: { // 底圖移動動畫 duration: 250 } }) // 實例化地圖 this.map = new Map({ target: ’map’, layers: [ new Tile({ source: new OSM() // 使用OSM底圖 }) ], overlays: [this.overlay], // 把彈窗加入地圖 view: new View({ center: [-27118403.38733027, 4852488.79124965], // 北京坐標 zoom: 12 // 地圖縮放級別（打開頁面時默認級別） }) }) this.mapClick() // 初始化地圖成功后，給地圖添加點擊事件 }, mapClick () { // 地圖點擊事件 // 通過 map.on() 監聽，singleclick 是單擊的意思。也可以用 click 代替 singleclick。 this.map.on(’singleclick’, evt => { const coordinate = evt.coordinate // 獲取坐標 const hdms = toStringHDMS(toLonLat(coordinate)) // 轉換坐標格式this.currentCoordinate = hdms // 保存坐標點 setTimeout(() => { // 設置彈窗位置 // 這里要設置定時器，不然彈窗首次出現，底圖會跑偏 this.overlay.setPosition(coordinate) }, 0)}) }, // 關閉彈窗 closePopup () { // 把彈窗位置設置為undefined，并清空坐標數據 this.overlay.setPosition(undefined) this.currentCoordinate = null } }, mounted () { this.initMap() }}</script> <style lang='scss' scoped> /* 彈窗樣式 */ .popup { min-width: 280px; position: relative; background: #fff; padding: 8px 16px; display: flex; flex-direction: column; transform: translate(-50%, calc(-100% - 12px)); /* 彈窗下方的小三角形 */ &::after { display: block; content: ’’; width: 0; height: 0; position: absolute; border: 12px solid transparent; border-top-color: #fff; bottom: -23px; left: 50%; transform: translateX(-50%); } } /* 關閉彈窗按鈕 */ .icon-close { cursor: pointer; align-self: flex-end; margin-bottom: 10px; }</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。