Google maps api 3 谷歌地图KML多边形
我已经成功地将一个kml文件导入到Google地图中，以便它显示房地产边界 我还使用了在的教程来绘制简单的多边形，并让它们可以单击 但是，我不知道如何使由kml文件创建的多边形可以单击。kml上的多边形是非常复杂的形状，由许多坐标组成，以形成多边形。以下示例仅适用于1个不动产边界：Google maps api 3 谷歌地图KML多边形,google-maps-api-3,Google Maps Api 3,我已经成功地将一个kml文件导入到Google地图中，以便它显示房地产边界 我还使用了在的教程来绘制简单的多边形，并让它们可以单击 但是，我不知道如何使由kml文件创建的多边形可以单击。kml上的多边形是非常复杂的形状，由许多坐标组成，以形成多边形。以下示例仅适用于1个不动产边界： -83.6530304633209,34.8237504877659,0 -83.65536046332301,34.8248804877671,0 -83.65672046332431,34.82629048776
-83.6530304633209,34.8237504877659,0 -83.65536046332301,34.8248804877671,0 -83.65672046332431,34.8262904877683,0 -83.6567504633242,34.8271904877693,0 -83.655330463323,34.8308304877725,0 -83.6565104633242,34.8333304877749,0 -83.65765046332511,34.8349204877764,0 -83.6571104633247,34.8383604877794,0 -83.6591604633265,34.8443604877853,0 -83.6588104633263,34.8468904877875,0 -83.6591604633265,34.8507504877912,0 -83.6583904633258,34.8543804877945,0 -83.6569404633244,34.8566604877968,0 -83.65475046332242,34.8599504877998,0 -83.6545604633223,34.8610404878007,0 -83.6543204633219,34.8635704878032,0 -83.65568046332331,34.8684104878075,0 -83.6553904633231,34.8695004878086,0 -83.6546604633224,34.8706904878097,0 -83.654380463322,34.872050487811,0 -83.6552304633228,34.8745504878134,0 -83.65494046332262,34.8759104878145,0 -83.65377046332161,34.8768304878154,0 -83.6504704633185,34.8796104878179,0 -83.64877046331689,34.8814504878196,0 -83.6469204633151,34.8849204878229,0 -83.6450204633134,34.8870304878249,0 -83.64227046331081,34.8897904878275,0 -83.6389204633076,34.8911304878288,0 -83.6344604633034,34.8921304878297,0 -83.6330604633022,34.8926104878301,0 -83.6295204632988,34.8948504878322,0 -83.6278404632974,34.8969604878341,0 -83.6273304632969,34.89832048783551,0 -83.62726046329681,34.8994904878366,0 -83.6286904632982,34.9030704878399,0 -83.6287304632981,34.9045104878412,0 -83.62844046329791,34.9056004878421,0 -83.6268704632964,34.9077104878443,0 -83.6256904632953,34.9086304878451,0 -83.6240704632939,34.9091204878455,0 -83.6226304632926,34.9088804878452,0 -83.6204304632904,34.9083904878448,0 -83.6179704632882,34.9100604878463,0 -83.61680046328711,34.9109904878471,0 -83.6157204632862,34.9116404878477,0 -83.61126046328189,34.9123704878484,0 -83.610200463281,34.91347048784951,0
new google.maps.LatLng(-83.6530304633209,34.8237504877659),
new google.maps.LatLng(83.65536046332301,34.8248804877671),
new google.maps.LatLng(-83.65672046332431,34.8262904877683),
new google.maps.LatLng(-83.6567504633242,34.8271904877693)
<!-- Declare the application as HTML5 using the <!DOCTYPE html> declaration -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!-- include the Maps API JavaScript using a script tag -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAaWOu7N4OX8BlYUwZhvWP2V0P6YQryN9Y&sensor=true"></script>
<script type="text/javascript">
function initialize()
{
<!-- create a JavaScript object literal to hold a number of map properties -->
var myOptions =
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
fillColor: '#0000ff'
};
<!-- a JavaScript function to create a "map" object -->
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var myLayer = new google.maps.KmlLayer('http://www.domain.com/gmaps/1.kml',{suppressInfoWindows: true,map: map});
google.maps.event.addListener
(
myLayer,"mouseover",function()
{
this.setOptions({fillColor: "#000000"});
}
);
google.maps.event.addListener
(
myLayer, 'click', function(kmlEvent)
{
var text = kmlEvent.featureData.description;
showInContentWindow(text);
}
);
google.maps.event.addListener
(
myLayer,"mouseover",function()
{
this.setOptions
(
{
fillColor: "#000000"
}
);
}
);
function showInContentWindow(text)
{
var sidediv = document.getElementById('content_window');
sidediv.innerHTML = text;
}
}
</script>
</head>
<!-- initialize the map object from the body tag's onload event -->
<body onLoad="initialize()">
<!-- create a div element named "map_canvas" to hold the Map -->
<div id="map_canvas" style="width:79%; height:100%; float:left"></div>
<div id="content_window" style="width:19%; height:100%; float:left"></div>
</body>
</html>
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
函数初始化（）
{
变异性肌肽=
{
中心：新google.maps.LatLng（-34.397150.644），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP，
填充颜色：“#0000ff”
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var myLayer=new google.maps.KmlLayer（'http://www.domain.com/gmaps/1.kml“，{suppressInfoWindows:true，map:map}）；
google.maps.event.addListener
(
myLayer，“鼠标悬停”，函数（）
{
setOptions（{fillColor:#000000}）；
}
);
google.maps.event.addListener
(
myLayer“单击”功能（kmlEvent）
{
var text=kmlEvent.featureData.description；
showInContentWindow（文本）；
}
);
google.maps.event.addListener
(
myLayer，“鼠标悬停”，函数（）
{
此选项为.setOptions
(
{
fillColor:#000000”
}
);
}
);
函数showInContentWindow（文本）
{
var sidediv=document.getElementById（'content_window'）；
sidediv.innerHTML=文本；
}
}
kmlayer的mouseover
事件；检查api文档，向下滚动一点以查看事件，事件的所有结果是：单击
，默认视口更改
，以及状态更改
。我还探讨了可用的选项，因为KmlLayer
是一个MVCObject
，但它不提供额外的事件。我认为这是不可能的
也许还有别的方法可以达到你想要的，但我还没有找到；让我们看看其他人可以添加什么。使用，您无法更改多边形的属性。如果使用第三方KML解析器（如或）将多边形渲染为本机Google Maps API v3对象，则可以更改其属性（但性能是否可接受将取决于KML的复杂程度）。还可以动态更改使用FusionTablesLayer渲染的平铺中的多边形（将KML导入Fusion选项卡）
您能告诉我们您的代码吗？即使是一个样品，但功能齐全？具有描述元素或BallookStyle/文本的KML多边形应该可以自动单击。天哪，这是一个快速回复！。我错误地说我不能使多边形可点击，我的意思是说我不能使它们对鼠标悬停做出反应（即改变颜色）。我在编辑中发布了上面的代码。谢谢。你也应该编辑问题，说鼠标悬停，而不是点击。KML还指定lng、lat、alt
组，但LatLng
采用lat、lng
。您的示例中的选项是错误的。您正在寻找的选项是从KML中提取点并创建能够为您提供mouseover
功能的方法吗？是的，如果无法在kmlLayer上完成。