0

.kmz ファイルからの目印を含む Google マップと、目印がクリックされたときにカスタマイズされた目印情報を表示する「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%'>


今私の質問は:

同時に持つ方法:

  • 目印のカスタム アイコン

  • クリックされた目印に応じてカスタマイズされた InfoWindowを表示するための「AddListener」イベント

?

4

1 に答える 1