为什么地图没有出现？

问题描述

我正在尝试了解如何使用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"
    }
  },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",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",// esri-icon-map-pin
      font: {
        size: 30,family: "CalciteWebCoreIcons"
      }
    },geometry: {
      type: "point",latitude: 32.7353
    },popupTemplate: {
      title: "San Diego Zoo",content: contentString
    }
  });
});

解决方法

请参见以下工作代码。

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"
          }
      },latitude: 32.7353
      }
  });

    });

,

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

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

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

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

,

您的jsfiddle缺少CSS：

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

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