Блог

Главная - Вопросы по программированию - диалог пользовательского интерфейса jquery на маркерах карты Google

диалог пользовательского интерфейса jquery на маркерах карты Google

#javascript #jquery #google-maps

#javascript #jquery #google-карты

Вопрос:

У меня есть карты Google, которые отображают несколько маркеров, мне нужно, чтобы события нажатия для маркеров отображали всплывающие окна, что следующий код делает с информационным окном, но я хочу использовать всплывающее диалоговое окно пользовательского интерфейса Jquery вместо информационного окна. во всплывающем окне должна отображаться информация из div, у которой свойство style отображается как None. может кто-нибудь помочь с этим, пожалуйста, я изо всех сил.

 enter code here
 <script>
 var myCenter=new google.maps.LatLng(51.508742,-0.120850);

  function initialize()
 {
 var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

  var marker=new google.maps.Marker({
  position:myCenter,
  });

  marker.setMap(map);

   var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

  google.maps.event.addListener(marker, 'click', function() {
   $("#mypopup").dialog();
   //infowindow.open(map,marker);
   });
    }

   google.maps.event.addDomListener(window, 'load', initialize);
   </script>
     </head>

   <body>
  <div id="googleMap" style="width:500px;height:380px;"></div>

   <div id="mypopup" style="display:none"> <div>


     </body>
     </html>

Ответ №1:

Попробуйте это: http://jsfiddle.net/lotusgodkk/x8dSP/3525 /

JS:

 var myCenter = new google.maps.LatLng(51.508742, -0.120850);

function initialize() {
    var mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    var marker = new google.maps.Marker({
        position: myCenter,
    });

    marker.setMap(map);

    var infowindow = new google.maps.InfoWindow({
        content: "Hello World!"
    });

    google.maps.event.addListener(marker, 'click', function () {
        console.log('clicked')
        //$("#mypopup").dialog();
        var dialog = $("#mypopup").dialog({
            buttons: {
                "Yes": function () {
                    alert('you chose yes');
                },
                    "No": function () {
                    alert('you chose no');
                },
                    "Cancel": function () {
                    dialog.dialog('close');
                }
            }
        });
        //infowindow.open(map,marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

HTML:

 <div id="googleMap"></div>
<div id="mypopup">Hello</div>

CSS:

 #googleMap {
     height: 380px;
     width: 500px;
 }
 #mypopup {
     display:none;
 }