0

我有一个谷歌地图，带有来自 .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”事件，以显示一个自定义的信息窗口，该信息窗口取决于已单击的地标

?

4

1 回答 1

0
  1. 从您的 createMarker 函数返回一个标记
  2. 使用有效的 HTML
  3. 抑制现有的信息窗口，并包括一个全局信息窗口（除非你喜欢一次打开多个信息窗口，我不喜欢）。
  4. 您可以更多地自定义标记，将其以地理位置为中心，默认情况下 v3 API 将图像的底部中心放在该位置。

  5. 在 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>

工作示例

于 2014-02-27T02:11:25.533 回答