Текст Этикетки на Google Maps v3

Я недавно мигрировали из v2 в v3 на Google Maps, и одна из функциональных возможностей, которая сломала использует текстовые метки, которые я реализующие с использованием библиотеки третьей стороной (BpLabel)Текст Этикетки на Google Maps v3

The text labels in the map

Вопрос:
Как я могу отображать текстовые метки в Google Maps v3, в которых есть события, подобные «мыши», которые срабатывают? Примечание: Я не хочу, чтобы маркер был видимым вместе с текстовой меткой. Я хочу только текст Lable быть видимым

, что я пытался:

Используется InfoWindow, но это слишком суматоха и покрышка должна быть явно закрыта, в то время как мне нужна накладка быть закрыт, когда указатель мыши находится над ним
Б InfoBox, который не так суматоху, как InfoWindow, но это также не имеет триггеры событий, как при наведении курсора

Любая помощь от тех, кто столкнулся с аналогичные вопросы, будут очень признательны.

Приветствие,
Rohitesh

источник

2013-11-22 Rohitesh

Я думаю, что единственный путь это использовать маркеры в качестве меток, то есть изменить форму маркеров для ваших желаемых этикеток. Две идеи, как это сделать:

1) Используйте модифицированные маркеры с пользовательской формой и текстом - например, иконки изображений, созданные с использованием Google Image Charts и Infographics (например, here или here). Но the google API to create such icons is deprecated without remedy! Or isn't?? Существует путаница, см. Мой комментарий здесь.

2) Использование markerwithlabel library (легко найти прибегая к помощи "Google Maps текст маркера"). С помощью этой библиотеки вы можете определять маркеры с метками с или без значков маркеров. Если вы не хотите, чтобы значок маркера, просто установите icon: {}:

var marker = new MarkerWithLabel({ 
    position: homeLatLng, 
    draggable: true, 
    raiseOnDrag: true, 
    map: map, 
    labelContent: "$425K", 
    labelAnchor: new google.maps.Point(22, 0), 
    labelClass: "labels", // the CSS class for the label 
    icon: {} 
});

Тогда вы можете работать с ним, как с обычным маркером, то есть добавить InfoWindow для наведения мыши событий!

Here is the example how to use this library for what you need.

код Конкурировать:

       <!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>MarkerWithLabel Mouse Events</title> 
<style type="text/css"> 
    .labels { 
    color: red; 
    background-color: white; 
    font-family: "Lucida Grande", "Arial", sans-serif; 
    font-size: 10px; 
    font-weight: bold; 
    text-align: center; 
    width: 40px; 
    border: 2px solid black; 
    white-space: nowrap; 
    } 
</style> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> 
<!-- <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>--> 
<script type="text/javascript" src="markerwithlabel.js"></script> 
<script type="text/javascript"> 
    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, 
     draggable: true, 
     raiseOnDrag: true, 
     map: map, 
     labelContent: "$425K", 
     labelAnchor: new google.maps.Point(22, 0), 
     labelClass: "labels", // the CSS class for the label 
     icon: {} 
    }); 

    var iw = new google.maps.InfoWindow({ 
     content: "Home For Sale" 
    }); 

var ibOptions = { 
    content: 'content' 
    // other options 
}; 

var ib = new google.maps.InfoWindow(ibOptions); 

ib.open(map, this); 
    google.maps.event.addListener(marker, "mouseover", function (e) { ib.open(map, this); }); 
    google.maps.event.addListener(marker, "mouseout", function (e) { ib.close(map, this); }); 


    } 

</script> 
</head> 
<body onload="initMap()"> 
<p>Try interacting with the marker (mouseover, mouseout, click, double-click, mouse down, mouse up, drag) to see a log of events that are fired. Events are fired whether you are interacting with the marker portion or the label portion.</p> 
<div id="map_canvas" style="height: 400px; width: 100%;"></div> 
</body> 
</html>

источник

2013-11-24 16:24:02 TMS

@Tomas в металической библиотеке размещает все маркеры на одном месте? Как я могу отображать каждый маркер там соответствующих точек. – justin

@TMS: поле содержимого всех маркеров находится в одном месте. Это ошибка, или мы что-то упускаем? –

@JitendraPancholi это просто пример, чтобы показать, что возможно, вам, возможно, понадобится преподнести его в ваших целях. – TMS

Вы можете использовать Infobox, но вы не можете использовать данные события с ним путем добавления слушателей событий на карте. Вы можете добавить класс в свои информационные поля (класс по умолчанию - инфобокс), поэтому вы должны иметь возможность добавлять события наведения непосредственно к этому с помощью jQuery или JavaScript.Вот код, я использую, чтобы не отображать маркер с меткой:

var regionsMarkerInfo = [{markerLabel: 'Label Name', coordinates: [50, -120], markerTranslation: "Label Name"}, { another object }, etc... ], 
    regionsOptions = [], 
    regionLabel = []; 

for(var r=0; r<regionsMarkerInfo.length; r++){ 
      regionsOptions[r] = { 
      content: "<a href='http://"+window.location.host+"/Destinations/Regions/" + regionsMarkerInfo[r].markerLabel + ".aspx'>"+ regionsMarkerInfo[r].markerTranslation + "</a>" 
      ,boxStyle: { 
      textAlign: "left" 
      ,fontSize: "18px" 
      ,whiteSpace: "nowrap" 
      ,lineHeight: "16px" 
      ,fontWeight: "bold" 
      ,fontFamily: "Tahoma" 
      } 
      ,disableAutoPan: true 
      ,position: new google.maps.LatLng(regionsMarkerInfo[r].coordinates[0], regionsMarkerInfo[r].coordinates[1]) 
      ,closeBoxURL: "" 
      ,isHidden: false 
      ,pane: "floatPane" 
      ,enableEventPropagation: true 
      ,boxClass: "regionLabel" 
      }; 

      regionLabel[r] = new InfoBox(regionsOptions[r]); 
      regionLabel[r].open(map); 
     }

Тогда вы должны быть в состоянии сделать это, чтобы создать событие парения:

$('.regionLabel').hover(function(){}, function(){});

или

document.getElementsByClassName('regionLabel).addEventListener('mouseover', ...)

Если вам необходимо убедиться в этом:

go here: http://travelalaska.dawleyassociates.com/Destinations/Regions.aspx
открыть консоль и напечатать (скопировать/вставить): $ ('. RegionLabel'). Hover (function() {console.log ('hovered');}, function() {console.log ('unhovered');});
наведите указатель мыши на большие ярлыки, и вы увидите вывод текста в консоли.

источник

2013-11-24 17:23:28 brouxhaha

Вы можете указать Картам Google использовать значок, URL которого является SVG-изображением. В большинстве браузеров это также может быть URI данных. Если вы знаете, как создать соответствующий SVG для маркера, который вы хотите на стороне клиента, то вы можете это сделать, а затем использовать библиотеку Base64 для преобразования строки SVG в данные Base64, префикс ее «data: image/svg + xml; base64 ", и тогда он может использоваться как URI данных.

Обратите внимание, что Internet Explorer выглядит немного более суетливым, и я обнаружил, что мне нужно свойство scaledSize, а также обычные свойства размера, происхождения, привязки и URL-адреса, чтобы получить любой SVG для рендеринга.

Этот подход позволяет использовать полное изображение SVG, включая текст в стиле, поэтому вы можете создать маркер с меткой с любым стилем, который вам нужен.

источник

2015-06-17 14:55:20

Текст Этикетки на Google Maps v3

ответ

Смежные вопросы