Google地圖上的多個標記帶有不同的圖標？

Question

我正在嘗試在Google地圖上使用帶有不同圖標的多個標記。

像這樣的東西：

var locations = [
    ['Me', 'ss00sd', 'meicon.png'],
    ['Location 2 Name', 'rm191qw', 'house.png'],
    ['Location 3 Name', 'ss68ll', 'house.png'],
];

但我不知道如何實現這一目標。

我用到目前為止的內容創建了這個jsfiddle： http : //jsfiddle.net/1Lf0rowp/

編輯：我注意到代碼由於某種原因未在jsfiddle中運行，因此在我自己的頁面中運行良好！ 但我也將所有代碼都包含在jsfiddle中。

代碼段（來自jsfiddle）：

 var locations = [ ['Location 1 Name', 'ss00sd', 'meicon.png'], ['Location 2 Name', 'rm191qw', 'house.png'], ['Location 2 Name', 'ss68ll', 'house.png'], ]; var geocoder; var map; var bounds = new google.maps.LatLngBounds(); function initialize() { map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); geocoder = new google.maps.Geocoder(); for (i = 0; i < locations.length; i++) { geocodeAddress(locations, i); } } google.maps.event.addDomListener(window, "load", initialize); function geocodeAddress(locations, i) { var title = locations[i][0]; var address = locations[i][1]; var url = locations[i][2]; geocoder.geocode({ 'address': locations[i][1] }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var marker = new google.maps.Marker({ icon: 'meicon.png', map: map, position: results[0].geometry.location, title: title, animation: google.maps.Animation.DROP, address: address, url: url }) infoWindow(marker, map, title, address, url); bounds.extend(marker.getPosition()); map.fitBounds(bounds); } else { alert("geocode of " + address + " failed:" + status); } }); } function infoWindow(marker, map, title, address, url) { google.maps.event.addListener(marker, 'click', function () { var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div></p></div>"; iw = new google.maps.InfoWindow({ content: html, //maxWidth: 350 }); iw.open(map, marker); }); } function createMarker(results) { var marker = new google.maps.Marker({ icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png', map: map, position: results[0].geometry.location, title: title, animation: google.maps.Animation.DROP, address: address, url: url }) bounds.extend(marker.getPosition()); map.fitBounds(bounds); infoWindow(marker, map, title, address, url); return marker; } 

 html, body, #map-canvas { margin: 0; padding: 0; height: 100%; } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas" style="width:100%; height:900px;"></div> 

Answer 1

您非常接近，只需在icon:后添加url icon:創建標記時：

var marker = new google.maps.Marker({
                icon: url,

我對您的小提琴進行了一些更改以使其起作用：您忘記了調用initialize()並且也將url數據更改為圖標，因此現在您的locations數組如下所示：

 var locations = [
        ['Location 1 Name', 'ss00sd', 'http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-icon.png'],
        ['Location 2 Name', 'rm191qw', 'https://www.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/images/marker.png'],
        ['Location 2 Name', 'ss68ll', 'http://www.worldheritageoutlook.iucn.org/resources/heritage_site_map_pin.png'],
    ];

工作提琴： http : //jsfiddle.net/1Lf0rowp/1/