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

望采纳


将以上 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>