Question

因此，正如标题所述，我正在使用React并尝试使用从Foursquare获取的地点列表来实现Google Maps并显示其标记。我没有使用任何包，例如react-google-maps等，仅使用香草JS。地图加载得很好，位置会被获取，但标记会时不时显示。加载时，它们指向正确的位置，但很少加载。我不确定我的createMarkers函数在哪里出问题：

// Initialize map   
initMap = () => {
    let map = new window.google.maps.Map(document.getElementById("map"), {
        zoom: 14,
        center: {lat: 45.5616873, lng: 18.6770196 }
    });

this.createMarkers(map);
}

// The following function uses the places array to create an array of markers on initialize.
createMarkers = (map) => {

    for (let i = 0; i < this.state.places.length; i++) {
      // Get the position from the location array
      let position = this.state.places[i].location;
      let name = this.state.places[i].name;
      let venueID = this.state.places[i].venueID;

      // Create a marker per location, and put into markers array.
      let marker = new window.google.maps.Marker({
        position: position,
        name: name,
        animation: window.google.maps.Animation.DROP,
        icon: this.state.defaultIcon,
        venueID: venueID,
        map: map
      });

      // Set state to save the marker to our array of markers.
      this.setState((state) => ({
        markers: [...state.markers, marker]
      }))
    }
}

// Create default marker icon
makeMarkerIcon(markerColor) {
    const markerImage = new window.google.maps.Icon(
      'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|'+ markerColor +
      '|40|_|%E2%80%A2',
      new window.google.maps.Size(21, 34),
      new window.google.maps.Point(0, 0),
      new window.google.maps.Point(10, 34),
      new window.google.maps.Size(21,34)
      );
      return markerImage;
  };

任何帮助将不胜感激，因为我还是React的新手，而且容易出现初学者的错误。

我在React中使用Google Maps，但是我的标记不能总是加载吗？

0 个答案: