Google maps Marker Label с несколькими символами
Вы также можете использовать missing() для проверки наличия или отсутствия аргумента y:
fooBar <- function(x,y){
if(missing(y)) {
x
} else {
x + y
}
}
fooBar(3,1.5)
# [1] 4.5
fooBar(3)
# [1] 3
3 ответа
Вы можете использовать MarkerWithLabel с иконками SVG.
Обновление: API Карт Google Javascript v3 теперь изначально поддерживает несколько символов в MarkerLabel
доказательстве понятия скрипта (вы не не предоставьте свою иконку, поэтому я составил ее)
Примечание: существует проблема с метками на перекрывающихся маркерах, которая устраняется с помощью этого исправления , кредит Робд , который поднял это в комментариях.
фрагмент кода:
function initMap() {
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new MarkerWithLabel({
position: homeLatLng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: "ABCD",
labelAnchor: new google.maps.Point(15, 65),
labelClass: "labels", // the CSS class for the label
labelInBackground: false,
icon: pinSymbol('red')
});
var iw = new google.maps.InfoWindow({
content: "Home For Sale"
});
google.maps.event.addListener(marker, "click", function(e) {
iw.open(map, this);
});
}
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 2
};
}
google.maps.event.addDomListener(window, 'load', initMap);html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
.labels {
color: white;
background-color: red;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
text-align: center;
width: 30px;
white-space: nowrap;
}<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>Хорошо, вот одно решение, которое я нашел, которое довольно запутано.
Я поместил полный текст метки в div, используя атрибут метки fontFamily. Затем я использую querySelectorAll, чтобы сопоставить получившиеся атрибуты стиля, чтобы извлечь ссылки и переписать теги после загрузки карты:
var label = "A123";
var marker = new google.maps.Marker({
position: latLon,
label: {
text: label,
// Add in the custom label here
fontFamily: 'Roboto, Arial, sans-serif, custom-label-' + label
},
map: map,
icon: {
path: 'custom icon path',
fillColor: '#000000',
labelOrigin: new google.maps.Point(26.5, 20),
anchor: new google.maps.Point(26.5, 43),
scale: 1
}
});
google.maps.event.addListener(map, 'idle', function() {
var labels = document.querySelectorAll("[style*='custom-label']")
for (var i = 0; i < labels.length; i++) {
// Retrieve the custom labels and rewrite the tag content
var matches = labels[i].getAttribute('style').match(/custom-label-(A\d\d\d)/);
labels[i].innerHTML = matches[1];
}
});
Это кажется довольно хрупким. Есть ли подходы, которые менее ужасны?
Гораздо более простым решением этой проблемы, позволяющим использовать буквы, цифры и слова в качестве метки, является следующий код. Более конкретно, строка кода начинается с «icon:». Любая строка или переменная может быть заменена на «k».
for (i = 0; i < locations.length; i++)
{
k = i + 1;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + k + '|FF0000|000000'
});
--- массив location содержит значения lat и long, а k - номер строки для адреса, который я отображал. Другими словами, если бы у меня было 100 адресов для сопоставления, мои маркеры были бы от 1 до 100.