vue中使用openstreetmap当div大小改变会出现空

文章讲述了在项目中遇到OpenStreetMap地图在缩放界面后出现空白的问题。解决方案是利用MutationObserver监听容器宽度变化,调用地图API如`updateSize`或`_onResize`来适应界面尺寸,确保地图正确填充。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

新建项目就不说了,问题就是,当你项目中通过点击放大缩小界面从而去渲染openstreetmap地图的时候,会出现空白的的地图界面,如何缩放地图都不会填充。

如下图右边出现的灰色部分

那么现在主要的思路是通过MutationObserver()监听容器的宽度的变化,从而调用地图中的size改变api,就能解决问题了。

1.当你是使用vue + openlayers去构建地图的时候, 使用updateSize方法更新

// 监听宽度变化更新地图,否则地图侧边会留下空白区域
    observer () {
      // 选择需要观察变动的节点
        var self = this;
      const targetNode = document.getElementById('left_content')
      // 观察器的配置(需要观察什么变动)
      const config = { attributes: true, childList: true, subtree: true }
      // 当观察到变动时执行的回调函数
      const callback = function (mutationsList, observer) {
        // Use traditional 'for loops' for IE 11
        for (let mutation of mutationsList) {
          if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.')
          } else if (mutation.type === 'attributes') {
            self.map.updateSize()
          }
        }
      }
      // 创建一个观察器实例并传入回调函数
      const observer = new MutationObserver(callback)
      // 以上述配置开始观察目标节点
      observer.observe(targetNode, config)
    }
  },

left_content是界面宽度改变的dom

  1. 当你是使用vue + leaflet去加载openstreetmap地图的时候,使用_onResize方法更新

observer() {
        var self = this;
        // 选择需要观察变动的节点
        const targetNode = document.getElementById("left_panel");
        // 观察器的配置(需要观察什么变动)
        const config = { attributes: true, childList: true, subtree: true };
        // 当观察到变动时执行的回调函数
        const callback = function (mutationsList, observer) {
          // Use traditional 'for loops' for IE 11
          for (let mutation of mutationsList) {
            if (mutation.type === "childList") {
              console.log("A child node has been added or removed.");
            } else if (mutation.type === "attributes") {
              console.log("thselfis.map", self.map);
              self.map._onResize();
            }
          }
        };
        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(callback);
        // 以上述配置开始观察目标节点
        observer.observe(targetNode, config);
      },

ok,在mounted周期中调用方法就行了。

Vue 2中,要使用`L.GeoMap`构建地图并添加地图搜索功能,通常你需要结合`Leaflet.markercluster`库来创建标记群组,并使用`Leaflet.MarkerWithLabel`或类似插件显示搜索结果的标签。以下是一个简单的步骤: 1. 首先,确保已经安装了相关的依赖: ``` npm install leaflet leaflet.markercluster leaflet.markerwithlabel vue-leaflet ``` 2. 在你的Vue组件中引入这些库: ```javascript import L from 'leaflet'; import MarkerCluster from 'leaflet.markercluster'; import MarkerWithLabel from 'leaflet.markerwithlabel'; ``` 3. 初始化地图地图容器: ```html <div id="map" ref="map"></div> ``` 4. 在`data()`方法中配置地图: ```javascript data() { return { map: null, markers: [] }; }, mounted() { this.initMap(); }, methods: { initMap() { const bounds = L.latLngBounds( // 设置地图中心点和初始缩放级别 [51.505, -0.09], // 北京坐标示例 [51.705, -0.19] ); this.map = L.map('map').setView(bounds.getCenter(), bounds.getZoom()); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(this.map); } } ``` 5. 添加地图搜索功能可以借助第三方服务如Google Places API、高德地图API等。这里仅给出一个通用思路,实际操作时需要替换为你选择的服务的API和回调: ```javascript methods: { searchLocation(query) { fetch(`your_search_api_url?q=${query}`) .then(response => response.json()) .then(data => { // 对数据进行处理,提取经纬度信息 const locations = data.map(result => ({ lat: result.geometry.location.lat(), lng: result.geometry.location.lng() })); // 创建marker实例并添加到地图上 locations.forEach(location => { const marker = new MarkerWithLabel({ position: [location.lat, location.lng], draggable: false, icon: L.divIcon({ className: 'marker-label-icon' }), labelContent: query, riseOnHover: true }); this.markers.push(marker); marker.addTo(this.map); // 如果使用MarkerCluster,你可以将单个marker转换为ClusterGroup // const clusterGroup = new MarkerCluster().addLayers([marker]); // clusterGroup.addTo(this.map); }); }) .catch(error => console.error(error)); } } ``` 6. 用户触发搜索事件(例如输入框改变或按钮点击),调用`searchLocation`方法: ```html <input v-model="query" @input="searchLocation($event.target.value)"> ``` 记得在`mounted`钩子之外的地方获取地图,因为此时地图已经初始化完毕。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值