Javascript 为什么地图没有出现？

我正在尝试了解如何使用ESRI映射api。我正在检查本教程，但复制示例不起作用，地图不会出现。你知道为什么吗

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

js:

require（[“esri/Map”，“esri/views/MapView”]，函数（Map，MapView）{
常量映射=新映射({
基本地图：“街道导航向量”
});
const view=新地图视图({
容器：“viewDiv”，
地图：地图，
缩放：12，
中心：{
纬度：32.7353，
经度：-117.1490
}
});
});
const marker=new google.maps.marker({
位置：{lat:32.7353，lng:-117.1490}，
标题：“圣地亚哥动物园”，
地图：地图
});
view.graphics.add({
符号：{
类型：“简单标记”，
颜色：“青色”
},
几何图形：{
键入：“点”，
经度：-117.1490，
纬度：32.7353
}
});
view.graphics.add({
符号：{
键入：“文本”，
颜色：“7A003C”，
文本：“\ue61d”，//esri图标映射引脚
字体：{
尺码：30，
家族：“方解石矿”
}
},
几何图形：{
键入：“点”，
经度：-117.1490，
纬度：32.7353
}
});
需要（[“esri/Map”、“esri/views/MapView”]，函数(
地图，地图视图
) {
常量映射=新映射({
基本地图：“街道导航向量”
});
const view=新地图视图({
容器：“viewDiv”，
地图：地图，
缩放：12，
中心：{
纬度：32.7353，
经度：-117.1490
}
});
const contentString=“The”+
“在巴尔博亚公园，有3700多只动物。”+
“”；
view.graphics.add({
符号：{
键入：“文本”，
颜色：“7A003C”，
文本：“\ue61d”，//esri图标映射引脚
字体：{
尺码：30，
家族：“方解石矿”
}
},
几何图形：{
键入：“点”，
经度：-117.1490，
纬度：32.7353
},
弹出模板：{
标题：“圣地亚哥动物园”，
内容：contentString
}
});
});

请参阅下面的工作代码

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


  

require（[“esri/Map”、“esri/views/MapView”]，函数(
地图，地图视图
) {
var映射=新映射({
基本地图：“街道导航向量”
});
var view=新的地图视图({
容器：“viewDiv”，
地图：地图，
缩放：12，
中心：{
纬度：32.7353，
经度：-117.1490
}
});
var contentString=“The”+
“在巴尔博亚公园，有3700多只动物。”+
“”；
view.graphics.add({
符号：{
键入：“文本”，
颜色：“7A003C”，
文本：“\ue61d”，//esri图标映射引脚
字体：{
尺码：30，
家族：“方解石矿”
}
},
几何图形：{
键入：“点”，
经度：-117.1490，
纬度：32.7353
},
弹出模板：{
标题：“圣地亚哥动物园”，
内容：contentString
}
});
});

请参阅下面的工作代码

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


  

require（[“esri/Map”、“esri/views/MapView”]，函数(
地图，地图视图
) {
var映射=新映射({
基本地图：“街道导航向量”
});
var view=新的地图视图({
容器：“viewDiv”，
地图：地图，
缩放：12，
中心：{
纬度：32.7353，
经度：-117.1490
}
});
var contentString=“The”+
“在巴尔博亚公园，有3700多只动物。”+
“”；
view.graphics.add({
符号：{
键入：“文本”，
颜色：“7A003C”，
文本：“\ue61d”，//esri图标映射引脚
字体：{
尺码：30，
家族：“方解石矿”
}
},
几何图形：{
键入：“点”，
经度：-117.1490，
纬度：32.7353
},
弹出模板：{
标题：“圣地亚哥动物园”，
内容：contentString
}
});
});

您的代码中缺少了一些重要的部分。 您应该查看与教程关联的codepen应用程序，该应用程序运行良好：

缺少的最重要的一点是您没有在代码中引用ArcGIS API JS

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

---

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

代码中缺少一些重要的部分。 您应该查看与教程关联的codepen应用程序，该应用程序运行良好：

缺少的最重要的一点是您没有在代码中引用ArcGIS API JS

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

---

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

您的JSFIDLE缺少CSS:

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

---

博客文章没有特别提到这一点，示例代码笔将其放在“HTML”部分，而不是有点隐藏的“CSS”部分。您还可以在所有的示例中看到它的使用。这将使地图显示。

您的JSFIDLE缺少CSS:

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

---

博客文章没有特别提到这一点，示例代码笔将其放在“HTML”部分，而不是有点隐藏的“CSS”部分。您还可以在所有的示例中看到它的使用。这将使地图显示。

谢谢，但地图仍然没有显示。（）谢谢，但地图还没有出现。谢谢，但在小提琴里我有进口的。