Есть ли способ пометить маркеры моей карты буквами?
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
['Joe Brown Park, New Orleans', 30.030342, -89.966561],
['City Park, New Orleans', 29.993514, -90.098118]
];
// Info Window Content
var infoWindowContent = [
[
'<h3>Joe Brown Park</h3>' +
'<h3>Named after 1 of the states largest independent oil producers, this park offers year-round events.</h3>' +
'</div>'],
[
'<h3>City Park </h3>' +
'<h3>A 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States.</h3>' +
'</div>'],
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(
markers[i][1],
markers[i][2],
markers[i][3]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
}
Могу ли я просто добавить переменную Icon к моей рабочей карте или что-то простое или мне нужно изменить большую часть моего кода, чтобы добавить буквы к моим маркерам? заранее спасибо
Решение
Вы можете добавить еще один столбец в массив маркеров:
var markers = [
['Joe Brown Park, New Orleans', 30.030342, -89.966561,'','PATHTOICON/icon1.png'],
['City Park, New Orleans', 29.993514, -90.098118,'','PATHTOICON/icon2.jpg']
];
А затем в цикле, который добавляет маркеры, просто добавьте значок: и укажите на значок столбца в массиве
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(
markers[i][1],
markers[i][2],
markers[i][3]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: markers[i][4]// <=== each marker can have its own icon
});
Другие решения
API Карт Google Javascript v3 поддерживает односимвольные метки на маркерах, это пометит ваш маркер номером (на основе нуля) маркера в вашем массиве.
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
label: ""+i
});
Если вы хотите, чтобы это была буква, вы можете добавить букву в массив в качестве четвертого элемента или преобразовать индекс массива в букву:
var label = String.fromCharCode(65+i);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
label: label
});
доказательство концепции скрипки
фрагмент кода:
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
['Joe Brown Park, New Orleans', 30.030342, -89.966561],
['City Park, New Orleans', 29.993514, -90.098118]
];
// Info Window Content
var infoWindowContent = [
[
'<h3>Joe Brown Park</h3>' +
'Named after 1 of the states largest independent oil producers, this park offers year-round events.' +
'</div>'
],
[
'<h3>City Park </h3>' +
'A 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States.' +
'</div>'
],
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(
markers[i][1],
markers[i][2]);
bounds.extend(position);
var label = String.fromCharCode(65 + i);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
label: label
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>