煜柏723 2022-12-12 15:58 采纳率: 0%
浏览 20

The ArcGIS API for JavaScript is already loaded (/init.js).

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地图展示(ArcGIS地图)</title>
    <link rel="stylesheet" href="http://26.3.12.41/arcgis_js_api/library/3.37/3.37/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://26.3.12.41/arcgis_js_api/library/3.37/3.37compact/esri/css/esri.css">
    <script src="http://26.3.12.41/arcgis_js_api/library/3.37/3.37/init.js" type="text/javascript"></script>
</head>

<body>
    <div id="map" style="width:100%;height:100%;"></div>
</body>

怎么把这个html 代码转成vue

  • 写回答

1条回答 默认 最新

  • ShowMeAI 2022-12-12 16:05
    关注

    望采纳


    将以上 HTML 代码转换为 Vue 代码需要按照以下步骤进行：

    • 使用 Vue 的官方模板创建一个新的 Vue 项目。
    • 将 head 标签中的 CSS 和 JavaScript 文件引用添加到新项目的 index.html 文件中。
    • 将 body 标签中的 div 元素添加到新项目的 App.vue 文件中，并使用 Vue 内置的 template 和 style 标签进行包装。
    • 在 App.vue 文件中，创建一个 Vue 实例，并将 map 元素作为渲染目标挂载到这个实例上。
    • 在 Vue 实例中，使用 ArcGIS API for JavaScript 的方法创建地图，并将地图添加到渲染目标元素中。

    完整的 Vue 代码如下所示：

    <template>
  <div>
    <link rel="stylesheet" href="http://26.3.12.41/arcgis_js_api/library/3.37/3.37/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://26.3.12.41/arcgis_js_api/library/3.37/3.37compact/esri/css/esri.css">
    <div id="map" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
import { loadModules } from 'http://26.3.12.41/arcgis_js_api/library/3.37/3.37/init.js';

export default {
  name: 'Map',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    loadModules(['esri/map'], { css: true })
      .then(([Map]) => {
        this.map = new Map('map', {
          center: [26.3, 12.41],
          zoom: 8
        });
      });
  }
};
</script>
    评论

报告相同问题？

问题事件

  • 创建了问题 12月12日

悬赏问题

  • ¥20 有偿：在ubuntu上安装arduino以及其常用库文件。
  • ¥15 请问用arcgis处理一些数据和图形，通常里面有一个根据点划泰森多边形的命令，直接划的弊端是只能执行一个完整的边界，但是我们有时候会用到需要在有很多边界内利用点来执行划泰森多边形的命令
  • ¥30 在wave2foam中执行setWaveField时遇到了如下的浮点异常问题，请问该如何解决呢？
  • ¥20 看图片）删除这个自动化录屏脚本就一直报错找不到脚本文件，如何解决？（相关搜索：bat文件）
  • ¥750 关于一道数论方面的问题，求解答！(关键词-数学方法)
  • ¥200 csgo2的viewmatrix值是否还有别的获取方式
  • ¥15 Stable Diffusion，用Ebsynth utility在视频选帧图重绘，第一步报错，蒙版和帧图没法生成，怎么处理啊
  • ¥15 请把下列每一行代码完整地读懂并注释出来
  • ¥15 pycharm运行main文件，显示没有conda环境
  • ¥15 寻找公式识别开发，自动识别整页文档、图像公式的软件