Я успешно настроил значок маркера для парсера geoxml3, однако введение markerclustererplus переопределяет индивидуальный значок.Я нашел информацию об изменении значков кластера, но не об отдельном значке, используемом markerclustererplus.
Я также потерял функцию щелчка, которая отображает информационное окно (?) При нажатии на маркер.Я попытался добавить прослушиватель кликов, но он не выдает тот же всплывающий результат, что и поведение по умолчанию, которое выдает geoxml3.
Рабочая скрипта: http://jsfiddle.net/BartmanEH/z7bfmyo2/
var map;
var myParser;
var markerClusterer;
var markers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 45.4,
lng: -75.7
},
zoom: 14
});
markerClusterer = new MarkerClusterer(map, [], {});
myParser = new geoXML3.parser({
map: map,
// markerOptions: {
// icon: {
// url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png", // url
// scaledSize: new google.maps.Size(48, 48) // scaled size
// }
// },
// createMarker:function(placemark){
// var marker = new google.maps.Marker({position:placemark.latlng});
// google.maps.event.addListener(marker, "click", function(){
// //console.log(placemark.name);
// infoWindow.content = placemark.description;
// infoWindow.open(map, marker);
// });
// markerClusterer.addMarker(marker);
// },
zoom: false,
afterParse: useData
});
myParser.parseKmlString(file2kml);
function useData(docs) {
console.log("parsed " + docs[0].placemarks.length + " placemarks");
for (var i = 0; i < docs[0].placemarks.length; i++) {
var marker = new google.maps.Marker({
position:docs[0].placemarks[i].latlng,
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
scaledSize: new google.maps.Size(32, 32)
}
});
markers.push(marker);
}
//markerclusterer overrides custom icon!
markerClusterer.addMarkers(markers, true);
}
}
google.maps.event.addDomListener(window, 'load', initMap);
var file2kml = `<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>test placemarks</name>
<Style id="icon-1899-DB4436-labelson">
<IconStyle>
<color>ff3644db</color>
<scale>1</scale>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/red-dot.png</href>
</Icon>
<hotSpot x="32" xunits="pixels" y="64" yunits="insetPixels"/>
</IconStyle>
</Style>
<Placemark>
<name>Church Of Ascension</name>
<description><![CDATA[latitude: 45.410755<br>longitude: -75.681623]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.410755</value>
</Data>
<Data name="longitude">
<value>-75.681623</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.681623,45.410755,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Bank Street Dragon</name>
<description><![CDATA[latitude: 45.420032<br>longitude: -75.699788]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.420032</value>
</Data>
<Data name="longitude">
<value>-75.699788</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.699788,45.420032,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Place Bell Canada</name>
<description><![CDATA[latitude: 45.420214<br>longitude: -75.692603]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.420214</value>
</Data>
<Data name="longitude">
<value>-75.692603</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.692603,45.420214,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>The Royal Canadian Legion Dominion Command</name>
<description><![CDATA[latitude: 45.310682<br>longitude: -75.899762]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.310682</value>
</Data>
<Data name="longitude">
<value>-75.899762</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.899762,45.310682,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Lieutenant Colonel John By</name>
<description><![CDATA[latitude: 45.422076<br>longitude: -75.692515]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.422076</value>
</Data>
<Data name="longitude">
<value>-75.692515</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.692515,45.422076,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Oscar Peterson, the Street Musician</name>
<description><![CDATA[latitude: 45.42268<br>longitude: -75.693955]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.42268</value>
</Data>
<Data name="longitude">
<value>-75.693955</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.693955,45.42268,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Somerset Square</name>
<description><![CDATA[latitude: 45.406222<br>longitude: -75.722117]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.406222</value>
</Data>
<Data name="longitude">
<value>-75.722117</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.722117,45.406222,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Windsor Park Flood Control</name>
<description><![CDATA[latitude: 45.39149<br>longitude: -75.677548]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.39149</value>
</Data>
<Data name="longitude">
<value>-75.677548</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.677548,45.39149,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Frank Clair Statue</name>
<description><![CDATA[latitude: 45.397413<br>longitude: -75.683657]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.397413</value>
</Data>
<Data name="longitude">
<value>-75.683657</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.683657,45.397413,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Ottawa Mill St. Brewpub</name>
<description><![CDATA[latitude: 45.419537<br>longitude: -75.71263]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.419537</value>
</Data>
<Data name="longitude">
<value>-75.71263</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.71263,45.419537,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>David Perry Memorial Bench</name>
<description><![CDATA[latitude: 45.397002<br>longitude: -75.6743]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.397002</value>
</Data>
<Data name="longitude">
<value>-75.6743</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.6743,45.397002,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Companions of the Cross</name>
<description><![CDATA[latitude: 45.412132<br>longitude: -75.70911]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.412132</value>
</Data>
<Data name="longitude">
<value>-75.70911</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.70911,45.412132,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>The Sunburst Building</name>
<description><![CDATA[latitude: 45.419296<br>longitude: -75.699572]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.419296</value>
</Data>
<Data name="longitude">
<value>-75.699572</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.699572,45.419296,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Rideau Curling Club</name>
<description><![CDATA[latitude: 45.413011<br>longitude: -75.704687]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.413011</value>
</Data>
<Data name="longitude">
<value>-75.704687</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.704687,45.413011,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Carling Otrain Station </name>
<description><![CDATA[latitude: 45.397474<br>longitude: -75.709528]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.397474</value>
</Data>
<Data name="longitude">
<value>-75.709528</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.709528,45.397474,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Geese Artwork</name>
<description><![CDATA[latitude: 45.417308<br>longitude: -75.700673]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.417308</value>
</Data>
<Data name="longitude">
<value>-75.700673</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.700673,45.417308,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name><![CDATA[Saint Patrick\'s Basilica]]></name>
<description><![CDATA[latitude: 45.41667<br>longitude: -75.70057]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.41667</value>
</Data>
<Data name="longitude">
<value>-75.70057</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.70057,45.41667,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Headless Elephants</name>
<description><![CDATA[latitude: 45.409045<br>longitude: -75.688275]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.409045</value>
</Data>
<Data name="longitude">
<value>-75.688275</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.688275,45.409045,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Valour Bridge</name>
<description><![CDATA[latitude: 45.310651<br>longitude: -75.901318]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.310651</value>
</Data>
<Data name="longitude">
<value>-75.901318</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.901318,45.310651,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Marble Soccer Balls</name>
<description><![CDATA[latitude: 45.404574<br>longitude: -75.711718]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.404574</value>
</Data>
<Data name="longitude">
<value>-75.711718</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.711718,45.404574,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Shrine To Mary.</name>
<description><![CDATA[latitude: 45.414046<br>longitude: -75.708891]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.414046</value>
</Data>
<Data name="longitude">
<value>-75.708891</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.708891,45.414046,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Guigues Hall Saint Paul University</name>
<description><![CDATA[latitude: 45.408308<br>longitude: -75.676281]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.408308</value>
</Data>
<Data name="longitude">
<value>-75.676281</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.676281,45.408308,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Ottawa Chinese Bible Church</name>
<description><![CDATA[latitude: 45.41234<br>longitude: -75.680081]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.41234</value>
</Data>
<Data name="longitude">
<value>-75.680081</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.680081,45.41234,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Canadian Bank Note Company</name>
<description><![CDATA[latitude: 45.395734<br>longitude: -75.745783]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.395734</value>
</Data>
<Data name="longitude">
<value>-75.745783</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.745783,45.395734,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Dominion Arboretum</name>
<description><![CDATA[latitude: 45.391174<br>longitude: -75.704042]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.391174</value>
</Data>
<Data name="longitude">
<value>-75.704042</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.704042,45.391174,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>BiTe This</name>
<description><![CDATA[latitude: 45.395077<br>longitude: -75.747579]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.395077</value>
</Data>
<Data name="longitude">
<value>-75.747579</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.747579,45.395077,0
</coordinates>
</Point>
</Placemark>
</Document>
</kml>
`;
#map {
height: 650px;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<div id="map"></div>
(1) Как настроить индивидуальный значок markerclustererplus?редактирование: я переместил настройку пиктограммы в то место, где создается маркер для массива для markerclusterer, и это, кажется, настраивает отдельную иконку маркера, однако есть некоторые остаточные маркеры при разборе geoxml3, которые, как мне кажется, нужно предотвратить, чтобы они отображались в первом? дело
1018 * ̶ (2) ̶ Там ли способ создать ̶m̶a̶r̶k̶e̶r̶c̶l̶u̶s̶t̶e̶r̶e̶r̶p̶l̶u̶s̶ ARRAY без использования обычая ̶c̶r̶e̶a̶t̶e̶M̶a̶r̶k̶e̶r̶ ФУНКЦИОНИРОВАНИЕ в ̶g̶e̶o̶x̶m̶l̶3̶ PARSER ̶ редактировать: Я понял это, создав массив маркеров и с помощьюМетод .addMarkers объекта markerclusterer.Fiddle и Snippet отредактированы для использования markerclustererplus.