0
votes

Pourquoi la carte n'apparaît pas?

J'essaie de comprendre comment utiliser l'API des cartes ESRI. Je vérifiais ce tutoriel https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/migrating-from-google-maps-javascript-api-to-arcgis-api-for-javascript / mais la réplication de l'exemple ne fonctionne pas, la carte n'apparaît pas. Est-ce que tu sais pourquoi?

J'ai un jsfidlde avec le problème:

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

javascript arcgis-js-api maps esri esri-maps

0 commentaires

3 Réponses :

0
votes

Veuillez consulter le code de travail ci-dessous.

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

Pour ajouter le modèle de popup, utilisez ci-dessous.

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

    });

1 commentaires

Merci mais la carte n'apparaît toujours pas. ( jsfiddle.net/opc9v43b )

0
votes

Vous avez des parties manquantes importantes dans votre code. Vous devriez vérifier l'application codepen associée à votre tutoriel, qui fonctionne bien: https://codepen.io/julie_powell/pen/NBLaaw

La chose la plus importante qui manque est que vous n'avez pas référencé ArcGIS API JS dans votre code.

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

Une fois que vous l'avez référencé, vous pouvez l'utiliser correctement.

1 commentaires

Merci, mais dans le violon je l'ai importé.

0
votes

Votre jsfiddle n'a pas le CSS:

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

L'article du blog ne le mentionnait pas spécifiquement, et l'exemple de code le contient dans la section "HTML", au lieu de la section "CSS", qui est un peu cachée. Vous pouvez également le voir utilisé dans tous les exemples sur https://developers.arcgis.com/javascript/latest/sample-code/ . Cela fera apparaître la carte.

0 commentaires