从可点击的多边形打开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地图

回答

相关问题