javascript - markclusterer 覆盖自定义单独的 geoxml3 标记图标-6ren

javascript - markclusterer 覆盖自定义单独的 geoxml3 标记图标

转载作者：行者123 更新时间：2023-12-03 01:41:40

我已经成功地为 geoxml3 解析器自定义了标记图标，但是，引入markerclustererplus 会覆盖自定义的单独图标。我找到了有关更改群集图标的信息，但没有找到有关markerclustererplus 使用的单个图标的信息。

我还失去了单击标记时显示信息窗口(？)的单击功能。我尝试添加一个点击监听器，但它不会产生与 geoxml3 产生的默认行为相同的弹出结果。

工作 fiddle :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̶ ？̶编辑:我通过创建标记数组并使用markerclusterer对象的.addMarkers方法解决了这个问题。 Fiddle 和 Snippet 已编辑为现在使用markerclustererplus。

最佳答案

MarkerClusterer 不会更改标记。您的代码正在使用要添加到 MarkerClusterer 的标记的默认图标。您的 createMarker 函数(来自您的 fiddle ，而不是您的代码片段)不会设置标记的 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);
},

proof of concept fiddle

代码片段:

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>

关于javascript - markclusterer 覆盖自定义单独的 geoxml3 标记图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50820055/

文章推荐： javascript - Telerik Kendo 网格从模板获取行详细信息

文章推荐： javascript - Typescript:遍历下拉列表

文章推荐： javascript - jQuery 将数据发送到 webapi

css - 自定义 ID 元素 + 自定义 CSS
好的，所以我编辑了以下... 只需将以下内容放入我的 custom.css #rt-utility .rt-block {CODE HERE} 但是当我尝试改变... 与 #rt-sideslid
ios - 自定义 tableview 单元格的问题。自定义 tableview 单元格内的 Collectionview 未根据单元格的高度进行调整
在表格 View 中，我有一个自定义单元格(在界面生成器中高度为 500)。在该单元格中，我有一个 Collection View ，我按 (10,10,10,10) 固定到边缘。但是在 tablev
swift - 如何使用鼠标在另一个 IB 自定义 View 中进入/退出来控制一个 IB 自定义 View
对于我的无能，我很抱歉，但总的来说，我对 Cocoa、Swift 和面向对象编程还很陌生。我的主要来源是《Cocoa Programming for OS X》(第 5 版)，以及 Apple 的充满
python - 自定义 Python Wheel 文件的 Yocto Warrior 自定义 Bitbake 配方无法安装，因为找不到 pip3
我正在使用 meta-tegra 为我的 NVIDIA Jetson Nano 构建自定义图像。我需要 PyTorch，但没有它的配方。我在设备上构建了 PyTorch，并将其打包到设备上的轮子中。现
jquery序列化()+自定义？
在 jquery 中使用 $.POST 和 $.GET 时，有没有办法将自定义变量添加到 URL 并发送它们？我尝试了以下方法: $.ajax({type:"POST", url:"file.php?
自定义 Traefik（本地）插件
Traefik 已经默认实现了很多中间件，可以满足大部分我们日常的需求，但是在实际工作中，用户仍然还是有自定义中间件的需求，为解决这个问题，官方推出了一个 Traefik Pilot[1] 的功
android - 自定义 TextInputLayout
我想让我的 CustomTextInputLayout 将 Widget.MaterialComponents.TextInputLayout.OutlinedBox 作为默认样式，无需在 XML 中
Emacs rgrep 自定义
我在 ~/.emacs 中有以下自定义函数: (defun xi-rgrep (term) (grep-compute-defaults) (interactive "sSearch Te
excel - 自定义 SUMPRODUCT()
我有下表: 考虑到每个月的权重，我的目标是在 5 个月内分散 10,000 个单位。与 10,000 相邻的行是我最好的尝试(我在这上面花了几个小时)。黄色是我所追求的。我试图用来计算的逻辑如下:计
自定义 Joomla 组件的文件上传表单
我的表单中有一个字段，它是文件类型。当用户点击保存图标时，我想自然地将文件上传到服务器并将文件名保存在数据库中。我尝试通过回显文件名来测试它，但它似乎不起作用。另外，如何将文件名添加到数据库中？是在模
Python邮箱 "from name"自定义
我有一个 python 脚本来发送电子邮件，它工作得很好，但问题是当我检查我的电子邮件收件箱时。我希望该用户名是自定义用户名，而不是整个电子邮件地址。最佳答案发件人地址应该使用的格式是: You
r - 自定义 ggcorrplot
我想减小 ggcorrplot 中标记的大小，并减少文本和绘图之间的空间。 library(ggcorrplot) data(mtcars) corr <- round(cor(mtcars), 1)
gtk - 自定义 GtkFileChooser
GTK+ noob 问题在这里: 是否可以自定义 GtkFileChooserButton 或 GtkFileChooserDialog 以删除“位置”部分(左侧)和顶部的“位置”输入框？我实际上要
Magento 自定义 block
我正在尝试在主页上使用 ajax 在 magento 中使用 ajax 显示流行的产品列表，我可以为 5 或“N”个产品执行此操作，但我想要的是将分页工具栏与结果集一起添加. 这是我添加的以显示流行产
Django 自定义 PasswordResetForm
我正在尝试使用 PasswordResetForm 内置函数。由于我想要自定义表单字段，因此我编写了自己的表单: class FpasswordForm(PasswordResetForm):
Angular:拖放树 - 自定义
据我了解，新的 Angular 7 提供了拖放功能。我搜索了有关 DnD 的 Tree 组件，但没有找到与树相关的内容。我在 Stackblitz 上找到的一个工作示例.对比drag'ndrop功能
WPF 自定义 TabControl
我必须开发一个自定义选项卡控件并决定使用 WPF/XAML 创建它，因为我无论如何都打算学习它。完成后应该是这样的: 到目前为止，我取得了很好的进展，但还有两个问题: 只有第一个/最后一个标签项应该有
r - 自定义 xtable
我要定制xtable用于导出到 LaTeX。我知道有些问题是关于 xtable在这里，但我找不到我要找的具体东西。以下是我的表的外观示例: my.table <- data.frame(Specif
ejs - EJS中的日期时间格式/自定义
用ejs在这里显示日期它给我结果 Tue Feb 02 2016 16:02:24 GMT+0530 (IST) 但是我需要表现为 19th January, 2016 如何在ejs中执行此操作？
JavaFX 自定义 ListView
我想问在 JavaFX 中使用自定义对象制作 ListView 的最佳方法，我想要一个每个项目如下所示的列表: 我搜了一下，发现大部分人都是用细胞工厂的方法来做的。有没有其他办法？例如使用客户 fxm

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - markclusterer 覆盖自定义单独的 geoxml3 标记图标