Как получить некоторую информацию в Google Maps без события нажатия на маркер и показать это в div, кроме infoWindow - PullRequest
Новая
       2

Как получить некоторую информацию в Google Maps без события нажатия на маркер и показать это в div, кроме infoWindow

4 голосов
/ 21 декабря 2011

Привет. Я показываю некоторые маркеры на своей карте Google и, нажав на маркер, я вызываю событие click и показываю некоторую информацию об этом месте справа (область, отличная от Map, а не в виде информационного окна).Теперь это событие вызывается при щелчке, и по умолчанию при загрузке страницы мой div остается пустым. Как я могу получить div, когда основная информация отображается после загрузки карты.Мне нужно показать информацию, которая соответствует маркеру, который является центральной точкой карты, и позже, когда пользователи нажимают на значки маркера, информация должна измениться и соответствовать конкретному кликаемому маркеру

Я пыталсячто-то, но это не работает: 

function loadMap() {
    var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
    var myOptions = {
        zoom: 3,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    var places = [];
    places.push(new google.maps.LatLng(51.43581, -0.51744));
    places.push(new google.maps.LatLng(48.87187, 2.31764));
    places.push(new google.maps.LatLng(45.45979, 9.19681));

    var infowindow;
    for(var i = 0; i<places.length; i++) {
        var marker= new google.maps.Marker({
            position: places[i],
            map: map,
            title: 'Place' + i
        });


        (function (i,marker){
            google.maps.event.addListener(marker, 'click' , function() {
                infowindow.setContent('PLace Number' + i)
                infowindow.open(i, marker)
            });
        });(i, marker);
    }
}
$("document").ready(function () {
    loadMap();
});

ОБНОВЛЕНИЕ ОБНОВЛЕНО

В основном мне нужно что-то вроде Функции слоя KML

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

Итог: мне нужно, чтобы информация появлялась при щелчке маркера ипо умолчанию при загрузке страницы информация должна отображаться в соответствии с центральной точкой карты.Это означает, что пользователи, приходящие из разных мест, будут видеть различную информацию, соответствующую их местоположению, откуда они приходят (я центрирую карту на основе местоположения пользователей)

Ответы [ 4 ]

4 голосов
/ 29 декабря 2011

Вы можете использовать событие addDomListener API Google Maps. Примерно так: 

<script>
  function initialize() {

    // Map initialization

  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
  <div id="map_canvas"></div>
</body>

Хотя приведенный выше код является кодом API JavaScript Javascript, метод addDomListener () привязывается к объекту окна браузера и позволяет API взаимодействовать с объектами за пределами обычного домена API.

далее чтение

На самом деле основная идея заключается в том, что вам нужно прочитать XMl, проанализировать данные и показать это в отдельном блоке справа. Этот блок можно динамически создавать при загрузке карты e-g: 

$("#body").append("<div class='newdiv'></div>")
0 голосов
/ 30 декабря 2011

Из Google Docs в разделе о InfoWindow:

Обратите внимание, что если вы вызываете open () без прохождения маркера, InfoWindow будет использовать позицию, указанную при построении через объект параметров InfoWindow.

Итак, почему в вашем коде вы просто не запускаете свое информационное окно и не вызываете метод open()?Я не особенно знаком с API, но как насчет: 

var infowindow = new google.maps.InfoWindow({
    content: 'your initial text'
});
infowindow.open();

Или, если вам нужен маркер для специальных целей в информационном окне, инициируйте маркер с центральной позицией и используйте его в infowindow.open(your_initial_pos)звоните.

0 голосов
/ 21 декабря 2011

Вы можете запустить событие, загруженное плиткой, на объекте карты.Проверьте ссылку на карту для событий

загруженные плитки ждут, пока плитки карты действительно не загрузятся, прежде чем выстрелить.Используя свой код, вы можете сделать что-то вроде этого: 

function loadMap() {
    var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
    var myOptions = {
        zoom: 3,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    google.maps.event.addListener(map, 'tilesloaded', function() {
    doSomething();
  });
0 голосов
/ 21 декабря 2011

Вы можете использовать jQuery для .triger() a click события на первом маркере на document.ready: 

$(marker).trigger('click');

Это запустит код, который вы уже написали, и сделает так, что при загрузке страницы ваш div будет заполнен данными из любого элемента, при нажатии которого вы нажали.

Когда вы связываетесь с document.ready, вам не нужно заключать в кавычки document: 

$(document).ready(function () {...});

Или вы можете использовать сокращение, если вам нравятся такие вещи: 

$(function () {...});

UPDATE

Вы можете выполнить вызов функции trigger после цикла for, в котором вы устанавливаете маркеры: 

for(var i = 0; i<places.length; i++) {
    var marker= new google.maps.Marker({
        position: places[i],
        map: map,
        title: 'Place' + i
    });


    (function (i,marker){
        google.maps.event.addListener(marker, 'click' , function() {
            infowindow.setContent('PLace Number' + i)
            infowindow.open(i, marker)
        });
    });(i, marker);

    //only run on the first marker
    if (i === 0) {

        //trigger a click event to show the first info-window
        $(marker).trigger('click');
    }
}
...