Question

我有一个谷歌地图，绘制了多个标记我需要点击事件标记显示弹出窗口，以下代码使用信息窗口，但我想使用Jquery ui pop对话框而不是信息窗口。弹出窗口必须显示来自显示样式属性的div的信息。无人可以帮助那些我努力奋斗。

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>

Answer 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;
 }

谷歌地图标记上的jquery ui对话框

1 个答案: