Как сделать так, чтобы всплывающее окно «Карта Google» отображалось при наведении курсора на адрес? - PullRequest
Новая
       2

Как сделать так, чтобы всплывающее окно «Карта Google» отображалось при наведении курсора на адрес?

0 голосов
/ 24 марта 2011

Я хочу настроить свой сайт так, чтобы каждый раз, когда пользователь наводил курсор на адрес, появлялась небольшая карта Google с этим адресом. Я читал документацию по API Карт Google, но мне трудно найти простой способ реализовать это. Кажется, мне нужно использовать то, что Google называет «геокодированием», чтобы найти широту и долготу на основе адреса ... Это тестовая страница, которую я пока имею: 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0px; padding: 0px }
          #map_canvas { height: 100% }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            var geocoder;
            var map;

            function codeAddress(address) {
                geocoder = new google.maps.Geocoder();
                geocoder.geocode( { 'address': address}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var myOptions = {
                      zoom: 20,
                      center: results[0].geometry.location,
                      mapTypeId: google.maps.MapTypeId.SATELLITE
                    }
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
            }
        </script>
    </head>
<body>
    <div onMouseOver="codeAddress('1405 Harrison Street, Oakland, CA')">
        1405 Harrison Street, Oakland, CA
    </div>
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Это, однако, заставляет карту отображаться в div map_canvas ... Что я действительно хочу, так это чтобы карта отображалась в виде небольшого всплывающего окна, вроде подсказки. Как я могу сделать это? Кроме того, как я могу настроить его так, чтобы при отключении пользователя карта исчезала?

Пока что я использую html и javascript, и мой веб-сайт находится в Coldfusion.

Ответы [ 4 ]

1 голос
/ 24 марта 2011

Что вы хотите сделать, это установить CSS для вашего div map_canvas равным display:none.Таким образом, вы будете иметь полный контроль над тем, когда он на самом деле отображается с помощью JavaScript.Как только вы это сделаете, вам нужно просто нацелиться на событие hover для вашего div мыши.Возможно, вы захотите сделать что-то подобное.Сначала убедитесь, что вы навели указатель мыши div на событие onmouseout 

<div onMouseOver="codeAddress('1405 ...)" onMouseOut="hideMap()" >

</div>

Затем нацельтесь и покажите div в вашей функции codeAddress следующим образом.* Очевидно, вы также захотите скрыть карту после выхода из div, поэтому ваша функция hideMap сделает именно это. 

function hideMap(){
 document.getElementById('map_canvas').style.display = 'none'
}

Я знаю, что это не реализует ваш идеальный сценарий «всплывающей подсказки»Однако я надеюсь, что это поможет вам начать.Взгляните на эту библиотеку подсказок .Я использовал его раньше, и это делает его очень простым, чтобы превратить любой div в всплывающую подсказку.Оттуда ты должен быть золотым.Удачного кодирования!

0 голосов
/ 25 марта 2011

Основываясь на решении Banx, я изменил скрипт следующим образом: 

(function(){
  var geocoder = new google.maps.Geocoder(),
      map = window.map = new google.maps.Map(document.getElementById("map_canvas"), {
          zoom: 16,
          center: new google.maps.LatLng(38.92, -77.06),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }),
      canvas = $("#map_canvas");

  $(".address").hover(function(){
    canvas.css({
      top: $(this).position().top,
      left: $(this).position().left
    }).show();
    geocoder.geocode( { 'address': $(this).text() }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          map.fitBounds(results[0].geometry.bounds);
      } else {
        // alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }, function(){
    canvas.hide();
  });
})();

Я использовал jQuery для обработки некоторых вещей DOM, но было бы очень легко изменить его на любую библиотеку (или нет), котораяты используешь.Основное отличие от кода Banx состоит в том, что он использует объекты map и geocoder вместо того, чтобы воссоздавать его каждый раз.Также я использую bounds из результата вместо location, потому что, на мой взгляд, это более желательно.

0 голосов
/ 24 марта 2011

Вы можете создать всплывающее окно при наведении курсора мыши, используя несколько jQuery.

Проверьте следующую функцию jQuery:

http://api.jquery.com/mouseover/

Идея в том, что вы делаете что-то вроде: 

<div id="adress1" style="position:relative;">
    72 MacDougal Street, New York, United States
    <div id="map_for_adress1" style="display:none; position:absolute; top:0; left:0;">
        <!--GOOGLE MAP, DIV for DATA or EMBED CODE-->
    </div>
</div>

<script type="text/javascript">
$("#adress1").mouseover(function() {

    //When mouse is over...
    $('#map_for_adress1').show(0);

  }).mouseout(function(){

    //When mouse is not over...
    $('#map_for_adress1').hide(0);

  });
</script>

Кроме того, зачем вам нужно использовать полный API Google Maps для отображения карты адреса? Почему не просто встроенная функция?

Что-то вроде: 

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=72 MacDougal Street, New York, United States&iwloc=A&output=embed&ie=UTF8"></iframe>
0 голосов
/ 24 марта 2011

Стиль map_canvas, чтобы иметь рамку и выглядеть как отдельное окно.
При наведении курсора мыши измените map_canvas (или любой другой кадр, в который вы хотите его вставить) x, y, чтобы он соответствовал mouseOver x, y.
Set mapcanvas.style.display = "none"; при наведении мышки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...