如何将自定义图标添加到谷歌地图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

回答

相关问题