我应该怎么做来创建自定义菜单出现时，我单击标记而不是删除它

这里是我的代码我已经完成了这一点，当我添加标记和悬停它infowindow出现，但他们都有相同的infowindow我需要它是每个标记的变化，秒而不是点击它被删除的标记，我想创建一个自定义菜单框在标记的顶部应该有选项添加信息和删除当我点击标记。我应该怎么做来创建自定义菜单出现时，我单击标记而不是删除它

<html> 
<head> 

<title>example</title> 


<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 


<style type="text/css"> 

#map_canvas { 
     width: 100%; 
     height: 500px; 
     background-color: #CCC;} 

#menu_bar{ 
     width: 100%; 
     height: 150px; 
     position:absolute; 
     bottom:0px; 
     background-color:#008080; 
     border-top:1px solid red;} 

body{ 
     padding:0px; 
     margin:0px;} 




</style> 
<!-- google maps Scripting start --> 
<script type="text/javascript"> 

var markers = []; 
function initialize() { 
    var myLatlng = new google.maps.LatLng(44.5403, -78.5463); 
    var mapOptions = { 
    zoom: 4, 
    center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    google.maps.event.addListener(map, 'click', function(event) { 
     addMarker(event.latLng); 
     }); 


    // add marker to positon 
    function addMarker(location) { 
     var marker = new google.maps.Marker({ 
       position: location, 
       map: map 
      }); 
      // deleting 
    google.maps.event.addListener(marker, 'click', function(event) { 
     this.setMap(null); 
     }); 

      // adding info window to gMaps 


        var infowindow = new google.maps.InfoWindow({ 
         content: "holdings content area" 
        }); 

        google.maps.event.addListener(marker, 'mouseover', function() { 
         infowindow.open(map, this); 
        }); 

        // assuming you also want to hide the infowindow when user mouses-out 
        google.maps.event.addListener(marker, 'mouseout', function() { 
         infowindow.close(); 
        }); 


     markers.push(marker); 
     } 

    // Sets the map on all markers in the array. 
     function setAllMap(map) { 
      for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(map); 

      } 
     } 

} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
<!-- google maps Scripting ends --> 





</head> 

<body> 
<div id="map_canvas"></div> 
<div id="menu_bar"> 




</div> 



</body> 
</html>

来源

2013-11-21 Johnfranklien

在创建时将onclick事件绑定到您的标记并onclick启动gMap API的信息框... –

首先创造任何你想要在一个HTML复制这段HTML到JavaScript变量菜单或弹出窗口或，下一步就要创建GMAP信息窗口，并设置内容，您的自定义设计，在最后一步绑定事件到您的标记，并在事件打开你的infowindow。

var map = new google.maps.Map(document.getElementById('yourmap'), mapOptions); 

    var popup= '<div>Design your whatever styled popup you want</div>'; 

    var infowindow = new google.maps.InfoWindow({ 
     content: popup 
    }); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'ABC' 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
    });

来源

2013-11-21 16:39:50

我应该怎么做来创建自定义菜单出现时，我单击标记而不是删除它

回答

相关问题