谷歌地圖中的圖標

Question

我寫了一個腳本，可以讓我在Google地圖上為點添加自己的自定義圖標，但是顯示的3個圖標中只有2個是我的自定義圖標。 另一個是默認的紅點（它是第一個不正確的標記）。 我不知道為什么它顯示默認而不是我的自定義。

  <script type="text/javascript">
    var markers = [{
        "title": 'Northern NJ',
        "lat": '40.248',
        "lng": '-73.580',
        "description": '<p>test</P>.'
      },
      {
        "title": 'Central NJ',
        "lat": '39.763',
        "lng": '-73.710',
        "description": '<p>test</P>.'
      },
      {
        "title": 'Southern NJ',
        "lat": '39.161',
        "lng": '-74.098',
        "description": '<p>test</P>.'
      },
    ];
    window.onload = function() {
      LoadMap();
    }

    function LoadMap() {
      var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 5,
        streetViewControl: false,
        mapTypeId: 'satellite'
      };
      var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

      //Create and open InfoWindow.
      var infoWindow = new google.maps.InfoWindow();

      for (var i = 0; i < markers.length; i++) {
        var data = markers[i];
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          icon: icon,
          title: data.title
        });
        var icon = {
          url: 'https://static.wixstatic.com/media/e09925_8ec9d5e526f94859b5348b41e3daba74~mv2.png'
        };
        var ctaLayer = new google.maps.KmlLayer({
          url: 'https://docs.google.com/uc?id=1razdqFzFB_MWvExuehRUiqhgAeDBXZOI&amp;export=kml',
          map: map
        });

        //Attach click event to the marker.
        (function(marker, data) {
          google.maps.event.addListener(marker, "click", function(e) {
            //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
            infoWindow.setContent("<div style = 'width:400px;min-height:150px'>" + data.description + "</div>");
            infoWindow.open(map, marker);
          });
        })(marker, data);
      }
    }

  </script>

我希望有人能弄清楚為什么只有其中兩個出現。

Answer 1

創建第一個標記后，您將定義icon 。 將該定義移到第一個標記之前（或循環之外），它將起作用。

概念證明

代碼段：

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #dvMap { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } 

 <div id="dvMap"></div> <!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script> <script type="text/javascript"> var markers = [{ "title": 'Northern NJ', "lat": '40.248', "lng": '-73.580', "description": '<p>test</P>.' }, { "title": 'Central NJ', "lat": '39.763', "lng": '-73.710', "description": '<p>test</P>.' }, { "title": 'Southern NJ', "lat": '39.161', "lng": '-74.098', "description": '<p>test</P>.' }, ]; window.onload = function() { LoadMap(); } function LoadMap() { var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 5, streetViewControl: false, mapTypeId: 'satellite' }; var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); //Create and open InfoWindow. var infoWindow = new google.maps.InfoWindow(); var icon = { url: 'https://static.wixstatic.com/media/e09925_8ec9d5e526f94859b5348b41e3daba74~mv2.png' }; for (var i = 0; i < markers.length; i++) { var data = markers[i]; var myLatlng = new google.maps.LatLng(data.lat, data.lng); var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: icon, title: data.title }); var ctaLayer = new google.maps.KmlLayer({ url: 'https://docs.google.com/uc?id=1razdqFzFB_MWvExuehRUiqhgAeDBXZOI&amp;export=kml', map: map }); //Attach click event to the marker. (function(marker, data) { google.maps.event.addListener(marker, "click", function(e) { //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow. infoWindow.setContent("<div style = 'width:400px;min-height:150px'>" + data.description + "</div>"); infoWindow.open(map, marker); }); })(marker, data); } } </script>