首页 / 浏览问题 / 其他 / 问题详情
地图在VUE的模态框加载的问题
6EXP 2018年05月09日

openlayers 9D

iServer 9D 

在VUE中地图页面作为一个组件写在了一个模态框里,然后需要的时候打开这个模态框,现在是模态框打开的时候不加载地图,关闭的时候才会加载地图,样式有没有问题不知道,但是抓包的时候发现打开模态框的时候根本就没有请求iServer加载地图资源,关闭模态框的时候才请求了iServer

<template>
  <Modal :title="title" @on-ok="helpConfirm" @on-cancel="helpCancel" @on-visible-change="helpChange"
          :styles="{top: '20px',width:'90%',height:'90%'}">
    <div style="margin:0 auto;width: 100%;height:  100%">
    <div id="map" style="margin:0 auto;width: 90%;height: 90%;float: left;"></div>
    <div id="mouse-position" style="margin: 10px auto;width: 90%;height: 10%;display: none;"></div>
  </div>
  </Modal>
</template>

1个回答

可能 是 跟  你组件生命周期有关系 没看到 js 代码不好判断呢
孔祥
1
186EXP 2018年05月10日
<template>
  <Modal :title="title"v-model="formModal"  @on-ok="helpConfirm" @on-cancel="helpCancel" @on-visible-change="helpChange"
          :styles="{top: '20px',width:'90%',height:'90%'}">
    <div style="margin:0 auto;width: 100%;height:  100%">
    <div id="map" style="margin:0 auto;width: 90%;height: 90%;float: left;"></div>
    <div id="mouse-position" style="margin: 10px auto;width: 90%;height: 10%;display: none;"></div>
  </div>
  </Modal>
</template>

<script>
  import op from 'openlayers';
  import {Logo, TileSuperMapRest} from '@supermap/iclient-openlayers';
  export default {
    props:['helpId','nm','title'],
    components: {
      op,
      TileSuperMapRest,
    },
    data () {
      return {
        formModal: false,
        map:'',
        jwd:''
      }
    },
    methods: {
      //当模态框打开或关闭的时候执行
      helpChange() {
        //判断为true即模态框为打开操作的时候执行
        //if (this.formModal) {
          var mousePositionControl = new op.control.MousePosition({
            coordinateFormat: op.coordinate.createStringXY(4),
            projection: 'EPSG:4326',
            className: 'custom-mouse-position',
            target: 'mouse-position',
            undefinedHTML: '&nbsp;'
          });
          var map = new op.Map({
            controls: op.control.defaults({
              attributionOptions: {
                collapsible: false
              }
            }).extend([mousePositionControl]),
            target: 'map',
            layers: [new op.layer.Tile({
              source: new op.source.TileSuperMapRest({
                url: "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China"
              }),
            })],
            view: new op.View({
              center: op.proj.fromLonLat([116, 38]),
              zoom: 3.7,
              minZoom: 3.7
            })
          });
          map.on('click', function () {
            this.jwd = document.getElementById('mouse-position').getElementsByTagName('div')[0].innerHTML;
            //this.$Message.success('已选择经纬度:'+document.getElementById('mouse-position').getElementsByTagName('div')[0].innerHTML);
            alert('已选择经纬度:' + document.getElementById('mouse-position').getElementsByTagName('div')[0].innerHTML)

          });
          console.log(this.map);
        //}
      },
      helpConfirm() {
        this.$emit('helpCallBack', this.jwd); //主动触发方法,向父组件传递的数据
      },
      helpCancel() {
        document.getElementById('mouse-position').getElementsByTagName('div')[0].innerHTML = '';
        this.$emit('helpCallBack', {}); //主动触发,向父组件传递的数据
      },
    },
    created () {   /* 这个是vue的钩子函数,当new Vue()实例创建完毕后执行的函数 */
      /*this.$nextTick(()=>{
        this.getMap();
      })*/
    },
  }

</script>

<style scoped>

</style>

这是整个组件的代码,受累您给看看

感觉你   map的 div 是通过slot  插入到modal组件的 那map的 初始化应该在modal的 组件里面写 才行 呀
您是说放在这里面吗?created () {   /* 这个是vue的钩子函数,当new Vue()实例创建完毕后执行的函数 */
      this.$nextTick(()=>{
        this.getMap();
      })
    },
这样也不行
把加载地图事件放在父控件,也不行,
我在一个静态页面测试的时候,发现这个放map的div设置display:none的时候是不请求iserver的
creat()是当前组件<Modal>  组件是个什么东西
就是iview框架的模态框组件

方便加一下QQ吗?
你应该 吧map  封装成一个组件 map的 初始化都在  map的 组件里面完成 然后 在modal 组件里面通过 slot 把map 组件插入进去
...