Javascript 谷歌地图多边形悬停可点击
我在编码方面不是很有经验（除了html和css），我正在尝试创建一个带有自定义多边形区域的邻里地图，当鼠标悬停在上面时会高亮显示，并且可以单击，会显示一个小图像和其他信息。基本上我是想重现你在。。。我想知道他们是如何创建它的，我假设他们使用谷歌地图api来创建它，但我不知道怎么做。我会很感激你对他们如何创造它的想法，以及我如何能继续创造同样的东西。谢谢这似乎也是许多其他人正在尝试创建或想出如何创建的东西。地图的API如下： 理论上似乎相当简单，但实际上可能更复杂 在API中，您可以看到一些东西，首先：Javascript 谷歌地图多边形悬停可点击,javascript,jquery,html,css,google-maps,Javascript,Jquery,Html,Css,Google Maps,我在编码方面不是很有经验（除了html和css），我正在尝试创建一个带有自定义多边形区域的邻里地图，当鼠标悬停在上面时会高亮显示，并且可以单击，会显示一个小图像和其他信息。基本上我是想重现你在。。。我想知道他们是如何创建它的，我假设他们使用谷歌地图api来创建它，但我不知道怎么做。我会很感激你对他们如何创造它的想法，以及我如何能继续创造同样的东西。谢谢这似乎也是许多其他人正在尝试创建或想出如何创建的东西。地图的API如下： 理论上似乎相当简单，但实际上可能更复杂 在API中，您可以看到一些东西，
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
// Add a listener for the click event.
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
function showArrays(event) {
//Javascript & Jquery goes here, probably the more challenging part to implement.
}
下面是一个完整、简单的示例，说明如何实现这一点。为简单起见，它仅显示一个以纬度/经度（0，0）为中心的正方形作为演示
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&sensor=false"></script>
<script type="text/javascript">
function init() {
// STEP 1: Create a map in the map div.
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(0.0, 0.0),
zoom: 5
});
// STEP 2: Create a polygon - in this case a red square centred at (0, 0). You'd want to create a polygon per neighbourhood.
var polygon = new google.maps.Polygon({
map: map,
paths: [
new google.maps.LatLng(-1.0, -1.0),
new google.maps.LatLng(-1.0, +1.0),
new google.maps.LatLng(+1.0, +1.0),
new google.maps.LatLng(+1.0, -1.0)
],
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.5
});
// STEP 3: Listen for clicks on the polygon.
google.maps.event.addListener(polygon, 'click', function (event) {
alert('clicked polygon!');
});
// STEP 4: Listen for when the mouse hovers over the polygon.
google.maps.event.addListener(polygon, 'mouseover', function (event) {
// Within the event listener, "this" refers to the polygon which
// received the event.
this.setOptions({
strokeColor: '#00ff00',
fillColor: '#00ff00'
});
});
// STEP 5: Listen for when the mouse stops hovering over the polygon.
google.maps.event.addListener(polygon, 'mouseout', function (event) {
this.setOptions({
strokeColor: '#ff0000',
fillColor: '#ff0000'
});
});
};
</script>
<style>
#map {
width: 300px;
height: 200px;
}
</style>
</head>
<body onload="init();">
<div id="map"></div>
</body>
</html>
函数init（）{
//步骤1：在map div中创建地图。
var mapDiv=document.getElementById（'map'）；
var map=new google.maps.map（mapDiv{
中心：新的google.maps.LatLng（0.0,0.0），
缩放：5
});
//第2步：创建一个多边形——在本例中是一个以（0，0）为中心的红色正方形。您可能希望为每个邻域创建一个多边形。
var polygon=新建google.maps.polygon({
地图：地图，
路径：[
新的google.maps.LatLng（-1.0，-1.0），
新的google.maps.LatLng（-1.0，+1.0），
新的google.maps.LatLng（+1.0，+1.0），
新google.maps.LatLng（+1.0，-1.0）
],
strokeColor:“#ff0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#ff0000'，
填充不透明度：0.5
});
//第三步：倾听多边形上的点击。
google.maps.event.addListener（多边形，'click'，函数（事件）{
警报（'clicked polygon！'）；
});
//第4步：当鼠标悬停在多边形上时，请倾听。
google.maps.event.addListener（多边形，'mouseover'，函数（事件）{
//在事件侦听器中，“this”指的是
//收到了这个事件。
此选项为.setOptions({
strokeColor:“#00ff00”，
填充颜色：“#00ff00”
});
});
//第5步：倾听鼠标何时停止在多边形上悬停。
google.maps.event.addListener（多边形，'mouseout'，函数（事件）{
此选项为.setOptions({
strokeColor:“#ff0000”，
填充颜色：“#ff0000”
});
});
};
#地图{
宽度：300px；
高度：200px；
}