首页 / 浏览问题 / Web / 问题详情
想在一个页面上显示两个地图,可只能显示一个是怎么回事呢?
12月8日, 2021

使用产品:vue-iclient-mapboxGL 操作系统:win7 x64

<template>
  <div class="app-container">
    <el-row :gutter="20">
  <el-col :span="10">
<div class="mapBox">
      <sm-web-map  :map-options="mapOptions" >
      <!-- <sm-zoom :show-zoom-slider="true" :showZoom="true"></sm-zoom> -->
      </sm-web-map>
    </div>
  </el-col>
  <el-col :span="2">
   <el-button @click="setZooms">取消</el-button>
  </el-col>
    <el-col :span="10">
      <sm-web-map  :map-options="mapOptionsTwo" id="map2">
      <!-- <sm-zoom :show-zoom-slider="true" :showZoom="true"></sm-zoom> -->
      </sm-web-map>
  </el-col>
</el-row>
</div>
</template>

<script>
export default {
  name: 'WaterResourcesAnalysis',
  components: {
  },
  data() {
    return {
      mapOptions: {
        container:"map",
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              type: 'raster',
              tiles: [
                'http://10.222.96.69:8090/iserver/services/map-China100/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
              ],
              tileSize: 256
            }
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 22
            }
          ]
        },
        closeButton:false,
        center: [116.83, 38.33], // starting position
        zoom: 11 // starting zoom
      },
      mapOptionsTwo: {
        container:"map2",
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              type: 'raster',
              tiles: [
                'http://10.222.96.69:8090/iserver/services/map-China100/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
              ],
              tileSize: 256
            }
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 22
            }
          ]
        },
        center: [116.83, 38.33], // starting position
        zoom: 11 // starting zoom
      }
    }
  },
  methods:{
      zoomed(ind){

      // console.log(ind.mapboxEvent);
      // console.log(ind.mapboxEvent.target);
      // //获取
      // console.log(ind.mapboxEvent.target.getZoom());
      // this.setZooms(ind.mapboxEvent.target.getZoom());
      },
      
      setZooms(numb){
        // this.mapOptions.zoom=numb;
        // this.mapOptions2.zoom=;
      }
      
      }
,
created() {

  }
  }
  

</script>
<style lang="scss" scoped>
.app-container{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 0;
    margin: 0;
  .mapBox{
   width: 500px;
    height: 500px;
  }
}
</style>

如代码可见,第一个sm-web-map是可见的,第二个却不能显示。

1个回答

您好,您是要分屏显示两个地图吗?根据mapboxGL的API map和div是通过div的id和container来进行对应的,您需要设置不同div的id,通过container参数的设置来进行对应。

可以参考这篇博客:https://www.jianshu.com/p/62680c1c3114
苏打青柠  (962分)  才高八斗
12月8日, 2021
您好,感谢回答。但我这是基于VUE es6的。

采用的是<sm-web-map>组件方式,这种方式该如何实现双屏呢?

您好,需要设置一下target,

谢谢哈,我试了试,确实可以了,感谢!
...