Несколько маркеров с метками в Google Maps - PullRequest
Новая
       22

Несколько маркеров с метками в Google Maps

1 голос
/ 21 января 2011

Я хотел бы реализовать несколько маркеров с метками (документально подтверждено здесь: http://google -maps-utility-library-v3.googlecode.com / svn / tags / markerwithlabel / 1.0.1 / docs / examples. html ) и у меня возникли проблемы с написанием кода.

Например, для 2 маркеров вы должны использовать следующий код: 

var latlng1 = new google.maps.LatLng(49, -123);
var latlng2 = new google.maps.LatLng(48, -123);

var marker1 = new MarkerWithLabel({
       position: latlng1,
       draggable: true,
       map: map,
       labelContent: "abcd",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels",
       labelStyle: {opacity: 0.75}
     });

 var marker2 = new MarkerWithLabel({
       position: latlng2,
       draggable: true,
       map: map,
       labelContent: "efgh",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels",
       labelStyle: {opacity: 0.75}
     });

Это нормально, но как насчет 10 маркеров? Я хотел бы иметь возможность сделать что-то вроде этого: 

var locations = [
    new google.maps.LatLng(49, -123),
    new google.maps.LatLng(48, -123),
    ];

var labels = [
    "abcd",
    "efgh",
    ];

Проблема в том, что когда я пишу функцию "for", на карте не отображаются маркеры. 

for ( var i = 0; i < locations.length; i++ )
{
    var marker = new MarkerWithLabel({
        position: locations[i],
        draggable: true,
        labelContent: labels[i],
        labelAnchor: new google.maps.Point(22,0),
        labelClass: "labels",
        labelStyle: {opacity: 0.85}});
}

Я не очень хорош в программировании, не могли бы вы сказать мне, что я делаю неправильно?

После этого, конечно, возникает проблема добавления информационных окон, но об этом поговорим позже.

Спасибо за ваше время.

Ответы [ 4 ]

1 голос
/ 18 июня 2013

Посмотрите эту статью и справочный веб-сайт для более подробной информации:

Несколько маркеров с метками на карте Google 

<script type="text/javascript">
 //Generate Markers Value Array
 var markers = [
 <asp:Repeater ID="rptMarkers" runat="server">
 <ItemTemplate>
            {
            "title":'<%# Eval("Area") %>',
            "lat": '<%# Eval("Latitute") %>',
            "lng": '<%# Eval("Longitute") %>',
            "description": '<%# Eval("Address") %>'
        }
 </ItemTemplate>
 <SeparatorTemplate>
    ,
 </SeparatorTemplate>
 </asp:Repeater>
 ];

</script>

// 

  for (i = 1; i <= markers.length; i++) {
    var data = markers[i-1]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);

    var marker = new MarkerWithLabel({
        position: myLatlng,
        map: map,
        title: data.title,
        labelContent: i,
        labelAnchor: new google.maps.Point(7, 30),
        labelClass: "labels", // the CSS class for the label
        labelInBackground: false
     });

    (function (marker, data) {
        google.maps.event.addListener(marker, "click", function (e) {
            infoWindow.setContent(data.description);
            infoWindow.open(map, marker);
        });
    })(marker, data);

  }

Ссылка:

Несколько маркеров с метками на карте Google с Asp.net

0 голосов
/ 24 января 2011

Спасибо за ответ. Да, я забыл включить параметр карты в ветке выше - он был у меня в коде.

Проблема на самом деле была связана с привязкой значков к маркерам: 

new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/black01.png')

, за которым следуют 02, 03 и т. Д. Я не записал массив соответственно, поэтому код никогда не попадал в секцию маркера (что было в порядке).

Содержание функции for выглядит следующим образом: 

var marker = new MarkerWithLabel({
        position: locations[i],
        draggable: true,
        map: map,
        icon: icons[i], 
        labelContent: labels[i],
        labelAnchor: new google.maps.Point(22,0),
        labelClass: "labels",
        labelStyle: {opacity: 0.85}});
0 голосов
/ 07 июня 2011

Перед циклом вам необходимо сначала объявить маркер как массив.

var marker = new Array();

Затем назначьте его только как класс MarkerwithLabel внутри цикла 

for ( var i = 0; i < locations.length; i++ )
{
    marker = new MarkerWithLabel({ pro})

}
0 голосов
/ 24 января 2011

В вашем цикле for вы забыли включить 

map: map,

под "draggable: true"

Причина, по которой это имеет значение, заключается в том, что вам нужно указать MarkerWithLabel, на какую карту добавить маркеры. У вас может быть несколько карт на странице.

...