使用viewinfowindow在Google地图标记上显示图像

问题描述：

我试图在用户单击标记时显示图像，但无法制作标记。显示的地图ID和标记也一样，但是当我点击标记时，它不显示任何图像。谁能帮我在显示图像：这里是我的代码：使用viewinfowindow在Google地图标记上显示图像

<html> 
     <body> 
    <head> 
<script src="http://maps.googleapis.com/maps/api/js"> 
     </script> 
<script> 
     var x=12.35; 
     var y=14.25; 
     var myCenter=new google.maps.LatLng(x,y); 

     function initialize() 
     { 
     var mapProp = { 
         center:myCenter, 
         zoom:10, 
         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:'<div><img src="download.png"></img></div>' 
               }); 
     infowindow.open(map,marker); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
     <div id="googleMap" style="width:500px;height:500px;"></div> 
</body> 
</body> 
</html>

什么是viewinfowindow？ – geocodezip

答

第一个问题是与google.maps.Infowindow应该google.maps.InfoWindow。资本化问题！

这将解决窗口未打开的问题。

为了让您的弹出窗口在鼠标点击时打开和关闭，您需要像这样将点击处理程序添加到您的。

 var currentPopup; 

     google.maps.event.addListener(marker, "click", function() { 
      if (currentPopup != null) { 
       currentPopup.close(); 
       currentPopup = null; 
      } 
      infowindow.open(map, marker); 
      currentPopup = infowindow; 
     }); 

     google.maps.event.addListener(infowindow, "closeclick", function() { 
      map.panTo(center); 
      currentPopup = null; 
     });

第一种方法将一个事件侦听到并将其分配给一个变量来确保多个不产生InfoWindows然后打开弹出。 closeclick方法会删除关闭弹出窗口的变量。

 var x=12.35; 
 
     var y=14.25; 
 
     var myCenter=new google.maps.LatLng(x,y); 
 

 
     function initialize() 
 
     { 
 
      var mapProp = { 
 
       center:myCenter, 
 
       zoom:10, 
 
       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:'<div><img src="icon.png"></img></div>' 
 
      }); 
 

 
      var currentPopup; 
 

 
      google.maps.event.addListener(marker, "click", function() { 
 
       if (currentPopup != null) { 
 
        currentPopup.close(); 
 
        currentPopup = null; 
 
       } 
 
       infowindow.open(map, marker); 
 
       currentPopup = infowindow; 
 
      }); 
 

 
      google.maps.event.addListener(infowindow, "closeclick", function() { 
 
       map.panTo(center); 
 
       currentPopup = null; 
 
      }); 
 

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

<html> 
 
<body> 
 
<head> 
 
    <script src="http://maps.googleapis.com/maps/api/js"></script> 
 
</head> 
 
<body> 
 
<div id="googleMap" style="width:500px;height:500px;"></div> 
 
</body> 
 
</body> 
 
</html>

使用viewinfowindow在Google地图标记上显示图像

相关推荐