從可點擊的多邊形打開InfoWindow Google地圖

在研究答案時，我已經查閱了API文檔和示例，許多類似的關於stackflow和一些Youtube示例的查詢，但沒有一個是我正在創建的，而且我也不能我去哪裏錯了。從可點擊的多邊形打開InfoWindow Google地圖

在這種情況下，我們希望infowindow通過在多邊形的定義邊框內單擊而不是通過選擇標記來顯示。我知道Googlemaps可以讓你做到這一點，只要你給你的infowindow一個LatLng的位置。

什麼我不明白是爲什麼信息窗口不開放......

能不能請您檢查代碼，讓我知道你是否能發現任何明顯我失蹤。（希望這是在代碼中的註釋清楚，但我期待在同樣的地圖創建許多不同的是多邊形）

<!DOCTYPE html> 
<html> 
<head> 
<title>TBC</title> 
<meta name="viewport" content="initial-scale=1.0"> 
<meta charset="utf-8"> 
<style> 
/* Always set the map height explicitly to define the size of the div 
* element that contains the map. */ 
    #map { 
    height: 100%; 
    } 
/* Optional: Makes the sample page fill the window. */ 
    html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 


#myDIV { 
width: 100%; 
padding: 50px 0; 
text-align: center; 
background-color: lightblue; 
margin-top:20px; 
} 


</style> 
</head> 
<body> 
<div id="map"style="width:800px;height:1200px;"></div> 

<script> 
    var map; 
    function initMap() {{ 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 17.247253, lng: 79.1}, 
     zoom: 6, 
     mapTypeId: 'satellite' 
    }); 





//BEGINNING AREA CODE 1 
// Define the LatLng coordinates for the polygon. 
    var hyderabadCoords = [ 

{lat:17.3876090549752,lng:78.5106470783611}, 
{lat:17.4637690550461,lng:78.5161870783663}, 
{lat:17.4391290550232,lng:78.4386270782939}, 
{lat:17.3876090549752,lng:78.5106470783611}, 


     ]; 

// Construct the polygon.    
    var hyderabadBorder = new google.maps.Polygon({ 
     paths: hyderabadCoords, 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 3, 
     fillColor: '#FF0000', 
     fillOpacity: 0.0 
    }); 
    hyderabadBorder.setMap(map); 

//Content of infobox 

var hyderLatLng = {lat: 17.39, lng: 78.50};  
var contentString = "TBC" 
var hyderinfowindow = new google.maps.InfoWindow({ 
     content: contentString, 
    position:hyderLatLng 
    }); 

// Add a listener for the click event. 
    hyderabadBorder.addListener('click', showArrays); 

hyderinfowindow = new google.maps.InfoWindow; 
} 
//END AREA CODE 1 
//BEGINNING AREA CODE 2...(Repeat 1 with new area details) 
//END ALL AREA CODES 


/** @this {google.maps.Polygon} */ 
function showArrays(event) { 
var vertices = this.getPath(); 
} 


} 
     </script> 
<script src="https://maps.googleapis.com/maps/api/js?  key=YOUR_API_KEY&callback=initMap" 
async defer></script> 
</body> 
</html>

來源

2016-12-06 ElaineE

你有2個問題：

要覆蓋具有信息框在它與內容一個是空的：

hyderinfowindow = new google.maps.InfoWindow;

您是尼夫R電話hyderinfowindow.open(map);

function showArrays(event) { 
    hyderinfowindow.open(map); 
}

proof of concept fiddle

代碼片段：

var map; 
 

 
function initMap() { 
 
    { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
     lat: 17.247253, 
 
     lng: 79.1 
 
     }, 
 
     zoom: 9, 
 
     mapTypeId: 'satellite' 
 
    }); 
 

 
    // Construct the polygon.    
 
    var hyderabadBorder = new google.maps.Polygon({ 
 
     paths: hyderabadCoords, 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 3, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.0 
 
    }); 
 
    hyderabadBorder.setMap(map); 
 

 
    //Content of infobox 
 
    var hyderLatLng = { 
 
     lat: 17.39, 
 
     lng: 78.50 
 
    }; 
 
    var contentString = "TBC" 
 
    var hyderinfowindow = new google.maps.InfoWindow({ 
 
     content: contentString, 
 
     position: hyderLatLng 
 
    }); 
 

 
    // Add a listener for the click event. 
 
    hyderabadBorder.addListener('click', showArrays); 
 
    } 
 
    //END AREA CODE 1 
 
    //BEGINNING AREA CODE 2...(Repeat 1 with new area details) 
 
    //END ALL AREA CODES 
 

 
    /** @this {google.maps.Polygon} */ 
 
    function showArrays(event) { 
 
    hyderinfowindow.open(map); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap); 
 
//BEGINNING AREA CODE 1 
 
// Define the LatLng coordinates for the polygon. 
 
var hyderabadCoords = [ 
 

 
    { 
 
    lat: 17.3876090549752, 
 
    lng: 78.5106470783611 
 
    }, { 
 
    lat: 17.4637690550461, 
 
    lng: 78.5161870783663 
 
    }, { 
 
    lat: 17.4391290550232, 
 
    lng: 78.4386270782939 
 
    }, { 
 
    lat: 17.3876090549752, 
 
    lng: 78.5106470783611 
 
    }, 
 
];

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 

 
#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#myDIV { 
 
    width: 100%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top: 20px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

來源

2016-12-06 07:31:15 geocodezip

從可點擊的多邊形打開InfoWindow Google地圖

回答

相關問題