Как показать белое всплывающее окно на пользовательской карте Google? - PullRequest
Новая
       1

Как показать белое всплывающее окно на пользовательской карте Google?

3 голосов
/ 10 сентября 2010

В настоящее время у меня есть массив мест для пользовательской карты, над которой я работаю.Я пытался, но не могу понять, как добавить всплывающее окно "click" над маркером.Я хочу, чтобы в белом поле отображалось имя и была опция, чтобы человек мог выбрать «проложить маршрут до здесь».Кто-нибудь знает, как я могу добиться этого с более чем одним маркером? 

<!DOCTYPE html>
<head>

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 50% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  var map;
  var marker
  function initialize() {
    var latlng = new google.maps.LatLng(42.098687,-75.917974);
 var restaurants = new Array();
 restaurants = [ 
         new google.maps.LatLng(42.898687,-75.917974),
         new google.maps.LatLng(42.698687,-73.917974),
         new google.maps.LatLng(42.198687,-75.917974),
         new google.maps.LatLng(41.098687,-75.917974)
         ];
    var myOptions = {
      zoom: 3,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
   var i = 0; 
 for ( i <0; i < restaurants.length;i++ ){
  var marker = new google.maps.Marker({
        position: restaurants[i],
     map:map,
        title:"Testing!"
    });
  popupDirections(marker);
  }
}
function popupDirections(marker) {
  var infowindow = new google.maps.InfoWindow(
      { content: "tests: "
      });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>

Ответы [ 2 ]

3 голосов
/ 10 сентября 2010

Всплывающее окно, о котором вы говорите, называется языком информации на языке карт Google. 

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("your contents");
});

Приведенный выше код связывает событие нажатия с вашим маркером и открывает информационное окно с указаннымтекст.здесь маркер - маркерный объект.

Надеюсь, это поможет.

1 голос
/ 10 сентября 2010

Способ сделать это состоит в том, чтобы создать одно глобальное информационное окно и затем использовать его снова и снова, таким образом, информационное окно просто перемещается к каждому маркеру, и содержимое информационного окна можно изменить с помощью метода setContent.Прочитайте здесь , и есть демо-версия Google, доступная со справочного сайта API.У меня была та же проблема, когда я делал карту для своего сайта,

Следующий код должен работать: 

<script type="text/javascript">
var map;
var marker;
var infowindow;   //Global infowindow created
function initialize() {
  var latlng = new google.maps.LatLng(42.098687,-75.917974);
  var restaurants = new Array();
  restaurants = [ 
         new google.maps.LatLng(42.898687,-75.917974),
         new google.maps.LatLng(42.698687,-73.917974),
         new google.maps.LatLng(42.198687,-75.917974),
         new google.maps.LatLng(41.098687,-75.917974)
         ];
   var myOptions = {
      zoom: 3,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    infowindow = new google.maps.InfoWindow({   //infowindow options set
               maxWidth: 355  
    });

    var i = 0; 
    for ( i <0; i < restaurants.length;i++ ){
           marker = new google.maps.Marker({
                      position: restaurants[i],
                      map:map,
                      title:"Testing!"
               });
            popupDirections(marker);
       }
}

function popupDirections(marker) {
  //this function created listener listens for click on a marker
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent("Tests: "); //sets the content of your global infowindow to string "Tests: "
    infowindow.open(map,marker); //then opens the infowindow at the marker
  });
}
</script>

Если вы хотите отдельный контент для каждого маркера (который, я полагаю, вы будете) вы можете передать некоторый контент в функцию popupDirections (), измененную строкой для контента "html": 

function popupDirections(marker, html) {
  //this function created listener listens for click on a marker
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html); //sets the content of your global infowindow to string "Tests: "
    infowindow.open(map,marker); //then opens the infowindow at the marker
  });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...