Question

我正在尝试了解如何使用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
    }
  });
});

Answer 1

请参见以下工作代码。

CREATE FUNCTION YourFunction
(
    @locationCode varchar(2)
)
RETURNS TIME
AS
BEGIN
    DECLARE @OpenTime TIME
    DECLARE @WorkStart TIME
    SET @WorkStart = '09:00'  

    SELECT @OpenTime = [OpenTime]
    FROM [dbo].[OperationHours]
    where @locationCode = [Location Code]

    RETURN ISNULL(@OpenTime, @WorkStart)
END

要添加弹出模板，请在下面使用。

 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
      }
  });

    });

Answer 2

您的代码中缺少一些重要的部分。您应该检出与您的教程关联的codepen应用程序，该应用程序可以正常工作： https://codepen.io/julie_powell/pen/NBLaaw

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

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

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

Answer 3

您的jsfiddle缺少CSS：

sns.stripplot(x='str',y='int',data=df)
sns.catplot(x='str',y='int',data=df)

博客文章中没有特别提及，示例代码笔在“ HTML”部分而不是“ CSS”部分中对此有所隐藏。您还可以在https://developers.arcgis.com/javascript/latest/sample-code/上看到所有示例中都使用了它。这将使地图显示出来。

为什么地图没有出现？

3 个答案: