vue-openlayers实现地图坐标弹框效果_vue2实现地图选择

2.5k 浏览量更新于2023-05-28 评论收藏 76KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue-openlayers实现地图坐标弹框效果实现地图坐标弹框效果

主要为大家详细介绍了vue-openlayers实现地图坐标弹框效果，文中示例代码介绍的非常详细，具有一定的参考

价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码，供大家参考，具体内容如下

openlayers

这个效果是点击地图，弹出坐标信息。

点击地图边缘时，底图会跟着移动，使弹窗能完整显示出来。

<h2 class="h-title">弹窗 popup</h2>

<div

class="popup"

ref="popup"

v-show="currentCoordinate"

<div class="content">{{currentCoordinate}}</div>

</div>

</template>

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({

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38664989

粉丝: 4
资源: 906

会员权益专享

vue-openlayers实现地图坐标弹框效果

评论0

会员权益专享

最新资源