1

我正在尝试了解如何使用 ESRI maps api。我正在查看本教程https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/migrating-from-google-maps-javascript-api-to-arcgis-api-for-javascript /但是复制示例不起作用，地图没有出现。你知道为什么吗？

我有一个关于这个问题的 jsfidlde：

https://jsfiddle.net/hreum6wj/

js：

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
  const map = new Map({
    basemap: "streets-navigation-vector"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 12,
    center: {
      latitude: 32.7353,
      longitude: -117.1490
    }
  });
});

const marker = new google.maps.Marker({
  position: { lat: 32.7353, lng: -117.1490 },
  title: "San Diego Zoo",
  map: map
});


view.graphics.add({
  symbol: {
    type: "simple-marker",
    color: "cyan"
  },
  geometry: {
    type: "point",
     longitude: -117.1490,
     latitude: 32.7353   
  }
});

view.graphics.add({
  symbol: {
    type: "text",
    color: "#7A003C",
    text: "\ue61d", // esri-icon-map-pin
    font: {
      size: 30,
      family: "CalciteWebCoreIcons"
    }
  },
  geometry: {
    type: "point",
    longitude: -117.1490,
    latitude: 32.7353   
  }
});


require([ "esri/Map", "esri/views/MapView" ], function(
  Map, MapView
) {
  const map = new Map({
    basemap: "streets-navigation-vector"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 12,
    center: {
      latitude: 32.7353,
      longitude: -117.1490
    }
  });
  
  const contentString = "The <a href='http://zoo.sandiegozoo.org/'>San Diego Zoo</a> " + 
    " in Balboa Park houses over 3,700 animals." +
    "<p><p><img src='https://visitoceanside.org/wp-content/uploads/2013/01/SanDiegoZoo.jpg' alt='San Diego Zoo' height='150'>"; 
  
  view.graphics.add({
    symbol: {
      type: "text",
      color: "#7A003C",
      text: "\ue61d", // esri-icon-map-pin
      font: {
        size: 30,
        family: "CalciteWebCoreIcons"
      }
    },
    geometry: {
      type: "point",
      longitude: -117.1490,
      latitude: 32.7353
    },
    popupTemplate: {
      title: "San Diego Zoo",
      content: contentString
    }
  });
});
4

3 回答 3

0

请参阅下面的工作代码。

 require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
     var  map = new Map({
         basemap: "streets-navigation-vector"
     });

 var view = new MapView({
     container: "viewDiv",
     map: map,
     zoom: 12,
     center: {
         latitude: 32.7353,
         longitude: -117.1490
     }
  });

  view.graphics.add({
      symbol: {
          type: "simple-marker",
          color: "cyan"
      },
      geometry: {
          type: "point",
          longitude: -117.1490,
          latitude: 32.7353
      }
  });

  view.graphics.add({
      symbol: {
          type: "text",
          color: "#7A003C",
          text: "\ue61d", // esri-icon-map-pin
          font: {
              size: 30,
              family: "CalciteWebCoreIcons"
          }
      },
      geometry: {
          type: "point",
          longitude: -117.1490,
          latitude: 32.7353
      }
  });

    });

要添加弹出模板，请使用以下内容。

  require([ "esri/Map", "esri/views/MapView" ], function(
          Map, MapView
        ) {
          var  map = new Map({
              basemap: "streets-navigation-vector"
          });

      var  view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 12,
          center: {
              latitude: 32.7353,
              longitude: -117.1490
          }
      });

      var  contentString = "The <a href='http://zoo.sandiegozoo.org/'>San Diego Zoo</a> " + 
        " in Balboa Park houses over 3,700 animals." +
        "<p><p><img src='https://visitoceanside.org/wp-content/uploads/2013/01/SanDiegoZoo.jpg' alt='San Diego Zoo' height='150'>"; 

        view.graphics.add({
            symbol: {
                type: "text",
                color: "#7A003C",
                text: "\ue61d", // esri-icon-map-pin
                font: {
                    size: 30,
                    family: "CalciteWebCoreIcons"
                }
            },
            geometry: {
                type: "point",
                longitude: -117.1490,
                latitude: 32.7353
            },
            popupTemplate: {
                title: "San Diego Zoo",
                content: contentString
            }
        });
    });
于 2020-11-11T12:39:57.707 回答
0

您的 jsfiddle 缺少 CSS：

html,
  body,
  #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }

博客文章没有具体提到这一点，示例代码笔在“HTML”部分有它，而不是“CSS”部分，这有点隐藏。您还可以在https://developers.arcgis.com/javascript/latest/sample-code/的所有示例中看到它。这将使地图显示出来。

于 2020-11-14T08:05:06.953 回答
0

您的代码中有一些重要的缺失部分。您应该查看与您的教程相关的 codepen 应用程序，该应用程序运行良好： https ://codepen.io/julie_powell/pen/NBLaaw

最重要的是您没有在代码中引用 ArcGIS API JS。

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

一旦你引用它，你就可以正确使用它。

于 2020-11-11T14:20:45.243 回答