Question

如何使用谷歌地图做这种弹出窗口？转到http://www.flightradar24.com/并点击机场，可以看到弹出窗口是完全个性化的。所以我设法在谷歌地图上创建弹出窗口，但现在我不知道这是如何为每个弹出窗口添加不同的消息。如何使用css和javascript自定义弹出窗口？所以现在我在这里，我想知道目前我的脚本是否正确，以及如何稍后到达像Flightradar24机场这样的弹出窗口？

<script type='text/javascript'> $(function(){function initialize() {
    var mapOptions = {
      zoom: 4,
       disableDefaultUI: true,
      center: new google.maps.LatLng(45.35, 4.98),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'),
                                  mapOptions);

    addMarkerWithWindow("This is Lemans", new google.maps.LatLng(48.006922, 0.20874), map);
addMarkerWithWindow("This is Paris", new google.maps.LatLng(48.856291, 2.352705), map);
}



    function addMarkerWithWindow(name, coordinate, map) {
var popup=$('<div/>', {
    content: name
});

    var image = 'rss.png';
    var marker = new google.maps.Marker({
    map: map,
icon: image,
    position: coordinate
});



    var styles = [
   {
      featureType: "all",
      stylers: [
        { saturation: -15 },
        { lightness: -10 },
      ]
    },

            ];
map.setOptions({styles: styles});



//  jQuery 

var popup=$('<div/>', {
    'id':'This is Lemans',
    'text':'Hello World!'

}).dialog({
    'autoOpen':false,
    'width': 600,
    'height':600,
    'resizable':false,
    'modal':false,
    'title':'Le Mans'
});


google.maps.event.addListener(marker, 'click', function(e) {
    console.log(e);
    popup.dialog('open');
});}initialize();});//]]>  </script>

Answer 1

如果更改addMarkerWithWindow函数以在弹出窗口中使用它的参数your code works for me：

function addMarkerWithWindow(name, coordinate, map) {
    var image = 'rss.png';
    var marker = new google.maps.Marker({
      map: map,
      // icon: image,
      position: coordinate
    });

   //  jQuery 
   var popup=$('<div/>', {
    'id':'This is '+name,
    'text':'Hello World!'

   }).dialog({
    'autoOpen':false,
    'width': 600,
    'height':600,
    'resizable':false,
    'modal':false,
    'title':name
   });


   google.maps.event.addListener(marker, 'click', function(e) {
    // console.log(e);
    popup.dialog('open');
   });
}

（console.log在IE中不起作用）

Answer 2

您好，您正在寻找像JSFiddle with custome popup on map click这样的东西。它只是一个快速的模型，为您展示如何在鼠标悬停事件上显示隐藏。您可能可以放置一些漂亮的动画并停止事件传播，也可以在点击时使其成为事件。

您应该查看的代码是从第120行到第151行

 events:{
  mouseover: function(marker, event, context){
    var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
    jQuery(listelement).attr('style','background-color:#ccc');
    jQuery(listelement).attr('data-isactive','1');
    var map = $(this).gmap3("get"),
      infowindow = $(this).gmap3({get:{name:"infowindow"}});
    if (infowindow){
      infowindow.open(map, marker);
      infowindow.setContent(context.data.ht);
      jQuery("#customPopup").html(context.data.ht); //This puts html in popup. You can even get html from a jquery template or get it via json if you want.
        jQuery("#customPopup").show(500); // This part shows the popup
    } else {
      $(this).gmap3({
        infowindow:{
          anchor:marker, 
          options:{content: context.data.ht}

        }
      });
        jQuery("#customPopup").html(context.data.ht); //This is when no window is present so we create new window and again full it with html as you wish
        jQuery("#customPopup").show(500); //Then show it to the user
    }
  },
  mouseout: function(marker,event,context){
    var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
    jQuery(listelement).attr('style','background-color:#fff');
    jQuery(listelement).attr('data-isactive','0');
    var infowindow = $(this).gmap3({get:{name:"infowindow"}});
    if (infowindow){
      infowindow.close();
      jQuery("#customPopup").html(""); //Hide the html or not. if you do this then html will go away first before hiding it not so good animated effect but you get the point.
      jQuery("#customPopup").hide(500); //Take it away from user
    }

自定义弹出谷歌地图

2 个答案: