在扩展的djando模板html文件中嵌入ESRI地图小部件

时间:2019-07-09 21:20:21

标签: jquery django django-templates arcgis-js-api

我试图将ESRI地图小部件嵌入到从另一个主HTML文件扩展的HTML模板中。母版被称为layout.html,并使用JQuery和Bootstrap带有内容块。

layout.html文件的脚本节定义了$(document).ready(fn(){..})。仅限扩展页

我无法获取地图的ESRI小部件以呈现在页面上的任何位置。

我尝试将脚本放在扩展文件的开头,然后放在扩展文件的主体中,然后在layout.html文件中的脚本块的末尾无济于事。

<script src="https://js.arcgis.com/4.12/"></script>

我得到了错误:

dojo.js:24 Error: multipleDefine
    at r (dojo.js:5)
    at Ia (dojo.js:21)
    at dojo.js:22
    at f (dojo.js:4)
    at Sa (dojo.js:22)
    at b (dojo.js:21)
    at HTMLScriptElement.<anonymous> (dojo.js:23)

在将上述脚本移至页脚时,我收到一条错误消息,指出 当我确实包含jquery.mask.js时,未定义$()。mask。

layout.html文件的末尾包含以下内容:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <script type="text/javascript" src="{% static 'home/js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'home/js/custom/register.js' %}"></script>
    <script type="text/javascript" src='https://www.google.com/recaptcha/api.js'></script>
    <script type="text/javascript" src="{% static 'home/js/slick.js' %}"></script>
    <script type="text/javascript" src="{% static 'home/js/jquery.mCustomScrollbar.min.js' %}"></script>

扩展页面... maps.html。

% extends "home/layout.html" %}
{% load static %}
{% block content %}
<script src="https://js.arcgis.com/4.12/"></script>
<div id="viewDiv"></div>
<script>

      var featureLayer;
      var view; 
      var mymap; 

      function doMe() { 


      console.log("Hello.....")
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ], function(Map, MapView, FeatureLayer) {
        mymap = new Map({
          basemap: "hybrid"
        });

        view = new MapView({
          container: "viewDiv",
          map: mymap,

          extent: {
            // autocasts as new Extent()
            xmin: -9177811,
            ymin: 4247000,
            xmax: -9176791,
            ymax: 4247784,
            spatialReference: 102100
          }
        });

        /********************
         * Add feature layer
         ********************/

        // Carbon storage of trees in Warren Wilson College.
        featureLayer = new FeatureLayer({
          url:
            "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
        });

        map.add(featureLayer);
        });
      }
    </script>
{% endblock %}

在控制台中调用函数doMe()会导致创建许多小部件!

有人可以帮我设置这个吗?

0 个答案:

没有答案