使用viewinfowindow在Google地圖標記上顯示圖像

-1

我試圖在用戶單擊標記時顯示圖像，但無法制作標記。顯示的地圖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>

來源

2017-06-03 rahul reddy

什麼是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>

來源

2017-06-03 18:53:53 jswaldon

使用viewinfowindow在Google地圖標記上顯示圖像

回答

相關問題