个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 12:25:18 25 4
gpt4 key购买 nike

我有一个绘制多个标记的 Google map ，我需要为标记提供单击事件来显示弹出窗口，以下代码对信息窗口执行此操作，但我想使用 Jquery ui 弹出对话框而不是信息窗口。弹出窗口必须显示来自 div 的信息，该 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>

最佳答案

试试这个: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;
 }

关于javascript - 谷歌地图标记上的 jquery ui 对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24238151/

25 4 0
文章推荐： cocoapods - Xcode 10 命令 PhaseScriptExecution 失败，退出代码非零 (EXPANDED_CODE_SIGN_IDENTITY : unbound variable)
文章推荐： javascript - 服务器和客户端之间的路径冲突
文章推荐： f# - F# curry 函数
文章推荐： electron - 在 Electron 中调试Worker线程
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com