Google Map API V3: как добавить пользовательские данные к маркерам


117

Есть ли способ добавить некоторую пользовательскую информацию к моим маркерам для дальнейшего использования. Есть способы получить информационное окно и заголовок, но что, если я хочу связать маркер с другой информацией.

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

Спасибо

Ответы:


214

Поскольку Google Marker - это объект JavaScript, вы можете добавить пользовательскую информацию в форму key: value, где ключ - это допустимая строка. Они называются свойствами объекта и могут рассматриваться по-разному. Значение может быть любым допустимым, например числами или строками, а также функциями или даже другими объектами. Три простых способа: в объявлении, точечная запись и квадратные скобки

var markerA = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    customInfo: "Marker A"
});

var markerB = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";

var markerC = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";

Затем, чтобы получить его аналогичным образом:

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});

3
В документации нет ничего, что формализовало бы этот шаблон. Надеюсь, они это сделают, а не сломают его в более поздней версии.
Адам

1
Свойство customInfo не существует для типа Marker.
alehn96

1
Если вы используете машинописный текст, вы можете использовать скобки, а не точку для назначения таких свойств
Cocoduf

14

Вы можете добавить свои собственные свойства к маркерам (только будьте осторожны, чтобы не конфликтовать со свойствами API).

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.