如何在谷歌地图上显示项目类似于谷歌显示其结果的方式

我需要显示一个带有多个标记的地图，我发现这个问题有我想要的但问题是我需要显示它旁边的每个项目的标记。

 ${product.name}  

我也检查了这个问题的答案，但没有多大帮助。

谷歌地图代码

 var pinColor = "FE7569"; var marker, i; var address=[]; address[0] = "New york"; address[1] = "las vegas"; address[2] = "san francisco"; address[3] = "chicago"; // Set default map center location var latlng = new google.maps.LatLng(latcenter,longcenter); // Create pinShadow for each marker var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com /chart?chst=d_map_pin_shadow", new google.maps.Size(40, 37), new google.maps.Point(0, 0), new google.maps.Point(12, 35)); // Function to create the dynamic marker function pinImage(i){ return image = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34)); } // Function to run once page has loaded function initialize(){ var geocoder=new google.maps.Geocoder(); // Set Default settigns for google map var settings = { zoom: 3, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP}; // Start Google Maps and assign it to div on site var map = new google.maps.Map(document.getElementById("map_canvas"), settings); // loop though total numner of address in array for (var i = 0; i < address.length; i++) { (function(i) { // Use geocoder to grab latlong for user inputed address geocoder.geocode( { 'address': address[i]}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { // Redefine map center location if (i == 1){ map.setCenter(results[0].geometry.location); } // Create dynamic markers on map as per the address array var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, title:address[i], zIndex: i, // PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..?? icon: pinImage(i), shadow: pinShadow }); } }); })(i); } } google.maps.event.addDomListener(window, 'load', initialize) 

理想的输出类似于下面的图像，每个结果都有一个命名标记，其位置由地图上的相关标记显示。 我需要基于坐标而不是地址的字母标记，而不是编号。

Answer 1

编辑：更改了代码段以从chart.apis.google.com获取标记图像。 （我不确定为什么googlemapsmarkers.com停止工作）。

您可以从标记中获取url，并将其显示为图像。 这是一个代码片段来说明：

Answer 2

听起来你需要字母而不是数字内的数字：

 // Function to create the dynamic marker function pinImage(i) { var letter = String.fromCharCode(i + 65); // 'A' is 65. return new google.maps.MarkerImage( "http://www.googlemapsmarkers.com/v1/" + letter + "/" + pinColor + "/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34)); } 

此外，您需要创建跟踪每个标记的地址，latlng和索引的对象。 我建议你使用map.data来做到这一点。 https://developers.google.com/maps/documentation/javascript/reference#Data

 var addresses = ['New York', 'San Francisco']; addresses.forEach(function(address, i) { // Create a feature. var feature = map.data.add({ 'id': i, 'properties': {'address': address} }); // Display the feature in the list. $('.address-list').append($('
') .append($('').attr('src', pinImage(i))) .append($('
').text(address))); // Do more fancy things here // Geocode the feature and position it on the map. geocoder.geocode({'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { feature.setGeometry(results[0].geometry.location); if (i == 0) { map.setCenter(results[0].geometry.location); } } }); }); 

然后你可以像这样控制标记的显示：

 map.data.setStyle(function(feature) { return { title: feature.getProperty('address'), zIndex: feature.getId(), icon: pinImage(feature.getId()), shadow: pinShadow }; });