您现在的位置: 首页 > SDK开发 > 开发指南


vue加载esmap室内地图 使用 vue 开发室内地图与传统开发,有些许不同 下载vue-cli2/vue-cli3版地图示例 SDK目前不支持用require js引用,只能使用<script src="lib/esmap.min.js"></script >引用

Tips:使用 vue -V查看你的vue-cli版本

Vue-cli3加载地图 vue-cli3没有 static 文件夹,而使用 public 文件夹代替。 其余操作步骤同vue-cli2,详见如下

Vue-cli2加载地图步骤

第一步:把esmap.js文件、地图相应的图标、地图文件、主题文件放在根目录 /static 文件夹下。

地图和样式全部不能放置到dist/static/esmap/打包后的文件夹下,要放到根目录/static/esmap/ 文件夹下。

易景空间地图vue版

第二步:在 index.html 文件下引入esmap sdk


<body>
  <div id="app"> </div>
  <script src="./static/esmap/esmap.min.js"> </script>
  <!-- built files will be auto injected -->
</body>
            

第三步:创建一个单独的地图容器组件 这里命名为 MapContainer.vue ,并创建一个id为map-container的容器


<template>
  <div id="map-container"></div>
</template>
              

第四步:组件挂载完成后初始化地图 组件mounted时,初始化地图

map一定要设置为全局对象,window.map =这样来赋值初始化,不然其它函数报map未定义.


export default {
  name: "MapContainer",
  mounted() {
    window.map = new esmap.ESMap({
      container: document.getElementById("map-container"),
      //如果地图、主题文件放在static目录下,请使用static路径
      mapDataSrc: "/esmap/data",
      mapThemeSrc: "/esmap/data/theme"
      // themeID: defaultOpt.themeID,
      // token: 'escope'
    });
    map.openMapById(10001);
    
    var ctlOpt = new esmap.ESControlOptions({
      position: esmap.ESControlPositon.RIGHT_TOP,
      //注意:imgURL参数是static目录下图片的路径
      imgURL: "static/esmap/resource/style/wedgets/img/" 
    });

    map.on("loadComplete", function() {
      //创建楼层控件
      var floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);

    });
  }
};
            

大功告成!

example