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

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日

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名