javascript - 将 Esri Dojo 组件放置在 polymer 元素内时无法找到 div

Question

在开发 Polymer 网站时，我想封装 ESRI 基于 dojo 的 map 组件所需的大部分功能，以便我可以将代码作为 polymer 组件重用。我尝试使用下面的代码创建元素，但 map 构造函数会抛出错误，因为它找不到 id 为“map”的元素。

<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">

<polymer-element name="esri-map">
    <template>
        <style>
            #map {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                background-color: wheat;
            }
        </style>
        <div id="map" render=""></div>
    </template>
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
        Polymer({
            ready: function () {
                var map;
                require(["esri/map", "dojo/domReady!"], function (Map) {
                    map = new Map("map", {
                        basemap: "topo",
                        center: [-122.45, 37.75], // longitude, latitude
                        zoom: 13
                    });
                });
            }
        });
    </script>
</polymer-element>

当使用该元素时，div 被调用并且我可以看到它，但是发生以下 javascript 错误:

Uncaught TypeError: Cannot read property 'id' of null

我不知道是否有人有尝试让这两种技术发挥良好作用的经验，但任何帮助将不胜感激。

Answer 1

包括一些代码，显示如何在模板主体中使用相同的 div id="map" 来完成此操作。

请注意，差异在于查找元素的方式。您需要根据范围使用 this.$.map 或 self.$.map ，如下所示。我假设自从您在 11 月份发布以来，您已经解决了这个问题。

  Polymer({

            // Defaults here provide hints as to type for polymer
            basemap: null,
            extent: '-130,25,-65,50',
            wkId: 4326,
            map: null,
            ready: function(){
            },
            domReady: function() {
                var self = this;

                require(['esri/map',
                         'esri/layers/FeatureLayer',
                         'esri/layers/ArcGISTiledMapServiceLayer',
                         'esri/dijit/Popup',
                         'esri/dijit/PopupTemplate',
                         'esri/geometry/Extent',
                         'esri/SpatialReference',
                         'dojo/ready'],
                    function(Map,FeatureLayer,ArcGISTiledMapServiceLayer,Popup,PopupTemplate,Extent,SpatialReference,ready){

                        var mapOptions = {
                            autoResize: true,
                            basemap: self.basemap,
                            sliderPosition: 'top-right'
                        };

                        if(self.extent){
                            var ext = self.extent.split(',');
                            mapOptions.extent = new Extent(+ext[0],+ext[1],+ext[2],+ext[3],new SpatialReference({wkid: self.wkId}));
                        }

                       self.popup = new Popup({
                        }, dojo.create("div"));

                        self.map = new Map(self.$.map, mapOptions);