我有一张Google地图,其中包含.kmz文件中的地标,以及一个“AddListener”事件,用于在点击地标时显示自定义地标信息:http://Bus.w.pw/DefaultIconAddListener.html:
<script src=https://Maps.GoogleAPIs.com/maps/api/js?v=3.exp&sensor=false></script>
<script>
function I() {
M = new google.maps.Map(document.getElementById('D'), {
center: new google.maps.LatLng(43.31,-0.36),
zoom: 14
})
L = new google.maps.KmlLayer({url: 'http://Bus.w.pw/TA.kmz', suppressInfoWindows: true})
L.setMap(M)
google.maps.event.addListener(L, 'click', function(E) {
W = new google.maps.InfoWindow({content: 'Customization' + E.featureData.description, position: new google.maps.LatLng(E.latLng.lat(),E.latLng.lng())})
W.open(M)
})
}
google.maps.event.addDomListener(window, 'load', I)
</script>
<div id=D style='width:90%;height:90%'>
但我希望地标有自定义图标而不是默认的Google图标。
要获得此结果,我使用GeoXML3:http://Bus.w.pw/CustomIconWithGeoXML.html:
<script src=https://Maps.GoogleAPIs.com/maps/api/js?v=3.exp&sensor=false></script>
<script src=GeoXML3.js></script>
<script src=ZipFile.complete.js></script>
<script>
function I() {
M = new google.maps.Map(document.getElementById('D'), {
center: new google.maps.LatLng(43.31,-0.36),
zoom: 14
})
P = new geoXML3.parser({map:M, markerOptions: {icon:'R.png'}, afterParse: S})
P.parse('http://Bus.w.pw/TA.kmz')
}
function S() {
P.showDocument(P.docs[0])
}
google.maps.event.addDomListener(window, 'load', I)
</script>
<div id=D style='width:90%;height:90%'>
现在我的问题是:
如何同时拥有:
地标的自定义图标
和“AddListener”事件,以显示取决于已点击的地标的自定义 InfoWindow
吗
答案 0 :(得分:0)
在KML中将地标的可见性设置为“1”:
<visibility>1</visibility>
<强>代码:强>
<html>
<head>
<title>Custom CreateMarker</title>
<script src=https://maps.googleapis.com/maps/api/js?v=3&sensor=false></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/ZipFile.complete.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script type="text/javascript">
var infowindow = new google.maps.InfoWindow();
var M = null;
var P = null;
function I() {
M = new google.maps.Map(document.getElementById('D'), {
center: new google.maps.LatLng(43.31,-0.36),
zoom: 14
});
P = new geoXML3.parser({map:M, markerOptions: {icon:{url:'http://bus.w.pw/R.png',size:new google.maps.Size(9,9),anchor:new google.maps.Point(5,5)}}, afterParse: S, createMarke\
r: CM, suppressInfoWindows: true});
P.parse('SO_20140226_bus_w_pw_TA.kml');
}
function S() {
P.showDocument(P.docs[0]);
}
function CM(placemark) {
var marker = P.createMarker(placemark);
google.maps.event.addListener(marker, 'click', function(E) {
infowindow.setContent('Description : ' + placemark.description+"<br>"+'Latitude & longitude : ' + E.latLng );
infowindow.setPosition(marker.getPosition());
infowindow.open(M /* ,marker */);
})
return marker;
}
google.maps.event.addDomListener(window, 'load', I)
</script>
</head>
<body>
<div id="D" style="width:600px;height:500px">
</body>
</html>
<html>
<head>
<title>Custom CreateMarker</title>
<script src=https://maps.googleapis.com/maps/api/js?v=3&sensor=false></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/ZipFile.complete.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script type="text/javascript">
var infowindow = new google.maps.InfoWindow();
var M = null;
var P = null;
function I() {
M = new google.maps.Map(document.getElementById('D'), {
center: new google.maps.LatLng(43.31,-0.36),
zoom: 14
});
P = new geoXML3.parser({map:M, markerOptions: {icon:{url:'http://bus.w.pw/R.png',size:new google.maps.Size(9,9),anchor:new google.maps.Point(5,5)}}, afterParse: S, createMarke\
r: CM, suppressInfoWindows: true});
P.parse('SO_20140226_bus_w_pw_TA.kml');
}
function S() {
P.showDocument(P.docs[0]);
}
function CM(placemark) {
var marker = P.createMarker(placemark);
google.maps.event.addListener(marker, 'click', function(E) {
infowindow.setContent('Description : ' + placemark.description+"<br>"+'Latitude & longitude : ' + E.latLng );
infowindow.setPosition(marker.getPosition());
infowindow.open(M /* ,marker */);
})
return marker;
}
google.maps.event.addDomListener(window, 'load', I)
</script>
</head>
<body>
<div id="D" style="width:600px;height:500px">
</body>
</html>