如何將自定義圖標添加到谷歌地圖v3

我繼承了下面的一些代碼，所有工作正常。我的問題是如何將自定義圖標添加到此地圖？我之前已經添加了一個，但我不知道應該在哪裏放置代碼？如何將自定義圖標添加到谷歌地圖v3

// initialize map 
    var unitedKingdom = new google.maps.LatLng(55.378051, -3.435973); 
    var options = { 
     center: unitedKingdom, 
     disableDefaultUI: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoom: 6 
    }; 
    var map = new google.maps.Map(document.getElementById('map'), options); 
    var infowindow = new google.maps.InfoWindow(); 
    var geocoder = new google.maps.Geocoder(); 

    // fetch and iterate over the winners 
    var current = 0; 
    $.getJSON('JSON_FILE.txt', function (winners) { 
     var popup = setInterval(function() { 
      (function (winner) { 
       var newCenter; 
       var location = winner.name.split(', '); // winner.location seems a bit unreliable (sometimes null) 
       geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
         newCenter = results[0].geometry.location; 
         map.panTo(newCenter); 
         var contentStr = '<div class="infowindow">' + 
             '<p><strong>' + winner.name + '</strong> just won ' + 
             '<strong>' + winner.displayAmount + '</strong> on ' + 
             '<strong>' + winner.game + '!</strong></p>' + 
             '</div>'; 
         infowindow.setPosition(newCenter); 
         infowindow.setContent(contentStr); 
         infowindow.open(map); 
        } 
       }); 
      })(winners[current]); 
      // increment the current index, or reset it if we're on the last item 
      current = (current < (winners.length-1)) ? (current+1) : 0; 
     }, 3000) 
    });

來源

2012-08-14 Keith Donegan

查看documentation on custom icons，它包括一個例子。

至於放置代碼的位置，它需要在地址解析器的回調函數中，「newCenter」是您可能希望標記位置的位置。

在您的代碼：

geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        newCenter = results[0].geometry.location; 
        map.panTo(newCenter); 
        var contentStr = '<div class="infowindow">' + 
            '<p><strong>' + winner.name + '</strong> just won ' + 
            '<strong>' + winner.displayAmount + '</strong> on ' + 
            '<strong>' + winner.game + '!</strong></p>' + 
            '</div>'; 
        infowindow.setPosition(newCenter); 
        infowindow.setContent(contentStr); 
        infowindow.open(map); 
       } 
      });

添加自定義標記是這樣的：

geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        newCenter = results[0].geometry.location; 
        map.panTo(newCenter); 
        var marker = new google.maps.marker({ 
         map: map, 
         position: newCenter, 
         icon: customIcon, 
         shadow: customIconShadow, 
         shape: customIconShape 
        }); 

        var contentStr = '<div class="infowindow">' + 
            '<p><strong>' + winner.name + '</strong> just won ' + 
            '<strong>' + winner.displayAmount + '</strong> on ' + 
            '<strong>' + winner.game + '!</strong></p>' + 
            '</div>'; 
        infowindow.setPosition(newCenter); 
        infowindow.setContent(contentStr); 
        infowindow.open(map); 
       } 
      });

定義customIcon，根據需要爲您的自定義圖標customIconShadow和customIconShape。

來源

2012-08-14 03:10:57 geocodezip

感謝地球，仍然很難。你能告訴我我插入的位置嗎？ – 2012-08-14 08:12:16

添加示例代碼以在「newCenter」中添加自定義標記，您需要定義自定義標記，原始帖子意味着您知道如何定義自己的標記。這裏是[示例]（http://www.geocodezip.com/v3_markers_infowindows.html），它將自定義標記放置在地圖上。 – geocodezip 2012-08-14 13:10:53

感謝mil代碼，但不幸的是標記，而不是演講bubbble再次出現。（圖標鏈接正確，地圖正在四處移動，但沒有任何語音氣泡或圖標） – 2012-08-14 14:52:13

如何將自定義圖標添加到谷歌地圖v3

回答

相關問題