Google maps 使d3 svg路径可单击（在谷歌地图覆盖中）
我试着用d3在谷歌地图上画一堆多边形。这部分工作正常（感谢大家在StackOverflow上的代码示例！） 我提供了一个多边形的GeoJSON列表，d3+GoogleMapsOverlay发挥了它的魔力 现在我想让多边形可以点击，这样我就可以打开一个信息窗口并显示GeoJSON标记 我已经尝试添加“.attr”（“onclick”）、“alert（'click'）；”）和各种形式的内容，但它不起作用，因为谷歌地图接收的是点击，而不是覆盖 关于让个人点击有什么想法吗Google maps 使d3 svg路径可单击（在谷歌地图覆盖中）,google-maps,d3.js,Google Maps,D3.js,我试着用d3在谷歌地图上画一堆多边形。这部分工作正常（感谢大家在StackOverflow上的代码示例！） 我提供了一个多边形的GeoJSON列表，d3+GoogleMapsOverlay发挥了它的魔力 现在我想让多边形可以点击，这样我就可以打开一个信息窗口并显示GeoJSON标记 我已经尝试添加“.attr”（“onclick”）、“alert（'click'）；”）和各种形式的内容，但它不起作用，因为谷歌地图接收的是点击，而不是覆盖 关于让个人点击有什么想法吗 #地图{ 宽度：10
#地图{
宽度：100%；
身高：100%；
}
SvgOverlay先生{
位置：相对位置；
宽度：100%；
身高：100%；
}
.SvgOverlay svg{
位置：绝对位置；
顶部：-4000px；
左：-4000px；
宽度：8000px；
高度：8000px；
}
.SvgOverlay径{
笔画：橙色；
笔画宽度：2px；
填充物：橙色；
填充不透明度：.3；
}
$（函数（）{
var$map=$（“#map”）；
var map=new google.maps.map（$map[0]{
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：{lat:33.045579573575154，lng:-96.97189523828126}
});
var geoJson=myJson（）；
var overlay=new google.maps.OverlayView（）；
overlay.onAdd=函数（）{
var layer=d3.select（this.getPanes（）.overlayer）.append（“div”）.attr（“class”，“SvgOverlay”）.attr（“id”，“mySvg”）；
var svg=layer.append（“svg”）；
var adminDivisions=svg.append（“g”）.attr（“class”，“adminDivisions”）；
overlay.draw=函数（）{
var markerOverlay=此；
var overlayProjection=markerOverlay.getProjection（）；
//将叠加投影转换为d3投影
var googleMapProjection=函数（坐标）{
var googleCoordinates=new google.maps.LatLng（坐标[1]，坐标[0]）；
var pixelCoordinates=重叠投影。fromLatLngToDivPixel（谷歌坐标）；
返回[pixelCoordinates.x+4000，pixelCoordinates.y+4000]；
}
path=d3.geo.path（）.projection（googleMapProjection）；
administrations.selectAll（“路径”）
.data（geoJson.features）
.attr（“d”，路径）//更新现有路径
.attr（“类”、“myPathClass”）
.enter（）.append（“svg:path”）
.attr（“d”，路径）；
};
//不起作用：(
//尝试将单击事件添加到主菜单-
d3.选择所有（“.SvgOverlay”）。在（“单击”，doSomething）；
//尝试将单击事件添加到单个
d3.选择所有（“.myPathClass”）。在（“单击”，doSomething）；
};
覆盖.setMap（map）；
函数doSomething（）{
警报（“点击”）；
}
函数myJson（）{
返回{
“类型”：“FeatureCollection”，
“crs”：{“类型”：“名称”，“属性”：{“名称”：“urn:ogc:def:crs:ogc:1.3:CRS84”}，
“特点”：[
{“类型”：“特征”，“属性”：{“名称”：“秋风”，“描述”：“秋风目标1 Id 4 Aptú名称秋风Aptú地址1679南121号公路商业环球Id{630B0681-BC80-4C21-960B-EA9E2F9F194B}Lat 33.0206260260437915 Lng-96.9952137886204形状。STArea（）526542.164207形状。STLength（）3392.783995“}，“几何学”：{“类型”：“多多边形”，“坐标”：[[[[[-96.99731320352906，33.021216819164927，0.0]，-96.997317696301693，33.020009550984215，0.0]，-96.993114621094179，33.020032531562563，0.0]，-96.993117243000668，33.02160055575534，0.0]，-96.99731320352906，33.0218191927，0.0]，]，
{“类型”：“特征”、“属性”：{“名称”：“巴兰坦”，“描述”：“巴兰坦对象”{u 1 2 Id 5 Apt \“名称巴兰坦对象”{u 2地址2801丹顿塔普路环球酒店{55637E1D-E20A-4612-91FF-2C642579B548}Lat 32.9922107728575 Lng-96.9903182401 Shape.STArea（）931629.409071 Shape.STLength（）4475.375089”，“几何学”：{“类型”：“多多边形”，“坐标”：[[[[-96.993073223213301，32.99301759955497，0.0]，-96.993052456415995，32.992954231928493，0.0]，-96.9930440698203，32.992592596409807，0.0]，-96.9930500149279，32.992243389503017，0.0]，-96.99306841265475，32.992016887012817，0.0]，[ -96.993093976413959, 32.991796598964598, 0.0 ], [ -96.993106356223819, 32.991496491331851, 0.0 ], [ -96.987610939012924, 32.991399297910839, 0.0 ], [ -96.987592146800381, 32.992924867973123, 0.0 ], [ -96.990485142326506, 32.992984445801007, 0.0 ], [ -96.993073223213301, 32.993015759955497, 0.0 ] ] ] ] } },
{“类型”：“特征”，“属性”：{“名称”：“Catalina”，“描述”：“Catalina OBJECTID_1 3 Id 14 Apt_名称Catalina Apt_地址998 Bellaire Boulevard GlobalID”{7D11055C-6487-44A5-8C08-88DD63F2AF00}Lat 33.0263437562578 Lng-97.013939544527 Shape.STArea（）444373.831028 Shape.STLength（）2703.799415}，“几何体”“：{”类型“：”多边形“，”坐标“：[[[[[-97.01483611955057，33.027467357582204，0.0]，-97.014882993690847，33.0252088650658，0.0]，-97.013270995985607，33.025156916916939082，0.0]，-97.013039468436816，33.02660014899，0.0]，-97.013063841670515，33.02746257753482，0]，[0-97.01356113575820] } },
{“类型”：“特征”，“属性”：{“名称”：“汉普顿湾”，“描述”：“汉普顿湾目标1 4 Id 32公寓名称汉普顿湾公寓地址248东南偏东
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
#map {
width: 100%;
height: 100%;
}
.SvgOverlay {
position: relative;
width: 100%;
height: 100%;
}
.SvgOverlay svg {
position: absolute;
top: -4000px;
left: -4000px;
width: 8000px;
height: 8000px;
}
.SvgOverlay path {
stroke: Orange;
stroke-width: 2px;
fill: Orange;
fill-opacity: .3;
}
</style>
<div id="map-wrap">
<div id="map">
</div>
</div>
<script>
$(function () {
var $map = $("#map");
var map = new google.maps.Map($map[0], {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {lat:33.045579573575154, lng:-96.97189523828126}
});
var geoJson = myJson();
var overlay = new google.maps.OverlayView();
overlay.onAdd = function () {
var layer = d3.select(this.getPanes().overlayLayer).append("div").attr("class", "SvgOverlay").attr("id","mySvg");
var svg = layer.append("svg");
var adminDivisions = svg.append("g").attr("class", "AdminDivisions");
overlay.draw = function () {
var markerOverlay = this;
var overlayProjection = markerOverlay.getProjection();
// Turn the overlay projection into a d3 projection
var googleMapProjection = function (coordinates) {
var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
}
path = d3.geo.path().projection(googleMapProjection);
adminDivisions.selectAll("path")
.data(geoJson.features)
.attr("d", path) // update existing paths
.attr("class","myPathClass")
.enter().append("svg:path")
.attr("d", path);
};
//DOESN'T WORK :(
//Try adding click event to main-<svg>
d3.selectAll(".SvgOverlay").on("click", doSomething);
//Try adding click event to individual <path>
d3.selectAll(".myPathClass").on("click", doSomething);
};
overlay.setMap(map);
function doSomething(){
alert("Clicked");
}
function myJson() {
return {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "Name": "Autumn Breeze", "Description": "<html xmlns:fo=\"http:\/\/www.w3.org\/1999\/XSL\/Format\" xmlns:msxsl=\"urn:schemas-microsoft-com:xslt\"> <head> <META http-equiv=\"Content-Type\" content=\"text\/html\"> <meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\"> <\/head> <body style=\"margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;\"> <table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px\"> <tr style=\"text-align:center;font-weight:bold;background:#9CBCE2\"> <td>Autumn Breeze<\/td> <\/tr> <tr> <td> <table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px\"> <tr> <td>OBJECTID_1<\/td> <td>1<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Id<\/td> <td>4<\/td> <\/tr> <tr> <td>Apt_Name<\/td> <td>Autumn Breeze<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Apt_Addr<\/td> <td>1679 S. Highway 121 Business<\/td> <\/tr> <tr> <td>GlobalID<\/td> <td>{630B0681-BC80-4C21-960B-EA9E2F9F194B}<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Lat<\/td> <td>33.0206260437915<\/td> <\/tr> <tr> <td>Lng<\/td> <td>-96.9952137886204<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Shape.STArea()<\/td> <td>526542.164207<\/td> <\/tr> <tr> <td>Shape.STLength()<\/td> <td>3392.783995<\/td> <\/tr> <\/table> <\/td> <\/tr> <\/table> <\/body> <\/html>" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -96.99731320352906, 33.021216819164927, 0.0 ], [ -96.997317696301693, 33.02009550984215, 0.0 ], [ -96.993114621094179, 33.020032531562563, 0.0 ], [ -96.993117243000668, 33.021160055075534, 0.0 ], [ -96.99731320352906, 33.021216819164927, 0.0 ] ] ] ] } },
{ "type": "Feature", "properties": { "Name": "Ballantyne", "Description": "<html xmlns:fo=\"http:\/\/www.w3.org\/1999\/XSL\/Format\" xmlns:msxsl=\"urn:schemas-microsoft-com:xslt\"> <head> <META http-equiv=\"Content-Type\" content=\"text\/html\"> <meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\"> <\/head> <body style=\"margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;\"> <table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px\"> <tr style=\"text-align:center;font-weight:bold;background:#9CBCE2\"> <td>Ballantyne<\/td> <\/tr> <tr> <td> <table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px\"> <tr> <td>OBJECTID_1<\/td> <td>2<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Id<\/td> <td>5<\/td> <\/tr> <tr> <td>Apt_Name<\/td> <td>Ballantyne<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Apt_Addr<\/td> <td>2801 Denton Tap Road<\/td> <\/tr> <tr> <td>GlobalID<\/td> <td>{55637E1D-E20A-4612-91FF-2C642579B548}<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Lat<\/td> <td>32.9922107728575<\/td> <\/tr> <tr> <td>Lng<\/td> <td>-96.9903318258401<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Shape.STArea()<\/td> <td>931629.409071<\/td> <\/tr> <tr> <td>Shape.STLength()<\/td> <td>4475.375089<\/td> <\/tr> <\/table> <\/td> <\/tr> <\/table> <\/body> <\/html>" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -96.993073223213301, 32.993015759955497, 0.0 ], [ -96.993052456415995, 32.992954231928493, 0.0 ], [ -96.9930440698203, 32.992592596409807, 0.0 ], [ -96.993050014349279, 32.992243389503017, 0.0 ], [ -96.99306841265475, 32.992016887012817, 0.0 ], [ -96.993093976413959, 32.991796598964598, 0.0 ], [ -96.993106356223819, 32.991496491331851, 0.0 ], [ -96.987610939012924, 32.991399297910839, 0.0 ], [ -96.987592146800381, 32.992924867973123, 0.0 ], [ -96.990485142326506, 32.992984445801007, 0.0 ], [ -96.993073223213301, 32.993015759955497, 0.0 ] ] ] ] } },
{ "type": "Feature", "properties": { "Name": "Catalina", "Description": "<html xmlns:fo=\"http:\/\/www.w3.org\/1999\/XSL\/Format\" xmlns:msxsl=\"urn:schemas-microsoft-com:xslt\"> <head> <META http-equiv=\"Content-Type\" content=\"text\/html\"> <meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\"> <\/head> <body style=\"margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;\"> <table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px\"> <tr style=\"text-align:center;font-weight:bold;background:#9CBCE2\"> <td>Catalina<\/td> <\/tr> <tr> <td> <table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px\"> <tr> <td>OBJECTID_1<\/td> <td>3<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Id<\/td> <td>14<\/td> <\/tr> <tr> <td>Apt_Name<\/td> <td>Catalina<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Apt_Addr<\/td> <td>998 Bellaire Boulevard<\/td> <\/tr> <tr> <td>GlobalID<\/td> <td>{7D11055C-6487-44A5-8C08-88DD63F2AF00}<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Lat<\/td> <td>33.0263437562578<\/td> <\/tr> <tr> <td>Lng<\/td> <td>-97.0139839544527<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Shape.STArea()<\/td> <td>444373.831028<\/td> <\/tr> <tr> <td>Shape.STLength()<\/td> <td>2703.799415<\/td> <\/tr> <\/table> <\/td> <\/tr> <\/table> <\/body> <\/html>" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -97.014838611955057, 33.027467357582204, 0.0 ], [ -97.014882993690847, 33.0252088650658, 0.0 ], [ -97.013270995985607, 33.025156916939082, 0.0 ], [ -97.013039468436816, 33.026600148499, 0.0 ], [ -97.013063841670515, 33.027462577753482, 0.0 ], [ -97.014838611955057, 33.027467357582204, 0.0 ] ] ] ] } },
{ "type": "Feature", "properties": { "Name": "Hampton Bay", "Description": "<html xmlns:fo=\"http:\/\/www.w3.org\/1999\/XSL\/Format\" xmlns:msxsl=\"urn:schemas-microsoft-com:xslt\"> <head> <META http-equiv=\"Content-Type\" content=\"text\/html\"> <meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\"> <\/head> <body style=\"margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;\"> <table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px\"> <tr style=\"text-align:center;font-weight:bold;background:#9CBCE2\"> <td>Hampton Bay<\/td> <\/tr> <tr> <td> <table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px\"> <tr> <td>OBJECTID_1<\/td> <td>4<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Id<\/td> <td>32<\/td> <\/tr> <tr> <td>Apt_Name<\/td> <td>Hampton Bay<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Apt_Addr<\/td> <td>248 East Southwest Parkway<\/td> <\/tr> <tr> <td>GlobalID<\/td> <td>{2D27BDA7-0CCD-46C3-ADD0-E1EB8C941318}<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Lat<\/td> <td>33.0180338579138<\/td> <\/tr> <tr> <td>Lng<\/td> <td>-96.9901980684424<\/td> <\/tr> <tr bgcolor=\"#D4E4F3\"> <td>Shape.STArea()<\/td> <td>378542.166679<\/td> <\/tr> <tr> <td>Shape.STLength()<\/td> <td>2489.966375<\/td> <\/tr> <\/table> <\/td> <\/tr> <\/table> <\/body> <\/html>" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -96.989455025454433, 33.01699540133685, 0.0 ], [ -96.989422131289444, 33.017225696133558, 0.0 ], [ -96.98940314831394, 33.01906784144068, 0.0 ], [ -96.990007468787724, 33.019069912294732, 0.0 ], [ -96.991054060203666, 33.019077333273032, 0.0 ], [ -96.991075837766445, 33.017434680867211, 0.0 ], [ -96.989776927723966, 33.016686809835257, 0.0 ], [ -96.989455025454433, 33.01699540133685, 0.0 ] ] ] ] } },
]}
} //end function
});
</script>
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayMouseTarget)
.append("div")
.attr("class", "providers");
...
}