0

我已经成功地为 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 解析中有残留标记我认为我需要防止在第一个显示案子？

̶(̶2̶)̶ ̶I̶s̶ ̶t̶h̶e̶r̶e̶ ̶a̶ ̶w̶a̶y̶ ̶t̶o̶ ̶c̶r̶e̶a̶t̶e̶ ̶t̶h̶e̶ ̶m̶a̶r̶k̶e̶r̶c̶l̶u̶s̶t̶e̶r̶e̶r̶p̶l̶u̶s̶ ̶a̶r̶r̶a̶y̶ ̶w̶i̶t̶h̶o̶u̶t̶ ̶u̶s̶i̶n̶g̶ ̶a̶ ̶c̶u̶s̶t̶o̶m̶ ̶c̶r̶e̶a̶t̶e̶M̶a̶r̶k̶e̶r̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶i̶n̶ ̶g̶e̶o̶x̶m̶l̶3̶ ̶p̶a̶r̶s̶e̶r̶?̶ edit: I have figured this out by creating an array of the markers and using the markerclusterer object's .addMarkers method. Fiddle 和 Snippet 现在编辑为使用 markerclustererplus。

4

1 回答 1

1

MarkerClusterer 不会更改标记。您的代码正在使用您要添加到 MarkerClusterer 的标记的默认图标。您的createMarker函数（来自您的小提琴，而不是您的代码片段）没有设置icon标记的属性，这意味着它创建了一个带有默认图标的标记：

createMarker:function(placemark){
  var marker = new google.maps.Marker({position:placemark.latlng});
  markerClusterer.addMarker(marker);
},

更正createMarker的功能（使用正确的图标）：

createMarker: function(placemark) {
  var marker = new google.maps.Marker({
    position: placemark.latlng,
    icon: {
      url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png", // url
      scaledSize: new google.maps.Size(48, 48) // scaled size
    }
  });
  markerClusterer.addMarker(marker);
},

概念证明小提琴

在此处输入图像描述

代码片段：

var map;
var myParser;
var markerClusterer;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 45.4,
      lng: -75.7
    },
    zoom: 14
  });
  var infowindow = new google.maps.InfoWindow();
  markerClusterer = new MarkerClusterer(map, [], {});
  myParser = new geoXML3.parser({
    map: map,
    zoom: false,
    singleInfowindow: true,
    infoWindow: infowindow,
    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 = myParser.createMarker(placemark);
      markerClusterer.addMarker(marker);
      return marker;
    },
    afterParse: useData
  });
  myParser.parseKmlString(file2kml);

  function useData(docs) {
    console.log("parsed " + docs[0].placemarks.length + " placemarks");
  }
}
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>
`;
html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

于 2018-06-12T17:07:51.063 回答