如何使用GeoXML3“AddListener placemark click”

时间:2014-02-25 20:15:30

标签: javascript google-maps google-maps-api-3 geoxml3 geoxml

我有一张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

1 个答案:

答案 0 :(得分:0)

  1. 从createMarker函数返回标记
  2. 使用有效的HTML
  3. 抑制现有的infowindows,并包含一个全局信息窗口(除非你希望一次打开多个信息窗口,否则我不这样做。)
  4. 您可以更多地自定义标记,将其置于地理位置的中心位置,默认情况下,v3 API会将图像的底部中心放在该位置。
  5. 在KML中将地标的可见性设置为“1”:

    <visibility>1</visibility>
    
  6. <强>代码:

    <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>

    working example