在一组 kml URL 上使用 geoxml3 解析器自定义标记图标

Question

我们可以学习如何为使用 geoxml3 解析的 kml 文件自定义标记图标 ()。

代码：

var myparser = new geoXML3.parser({
  map: map,
  markerOptions: {
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  }
});

但是，我想通过将一组 kml URL 传递给 geoxml3 解析器来使我的代码在解析多个 kml 文件时更有效率。下面是使用一组 kml 文件和一次调用解析器的示例：

var urlArray =[];
urlArray.push("pathto/data1.xml");
urlArray.push("pathto/data2.xml");

var myParser = new geoXML3.parser({
    map: map,
    processStyles: true,
    zoom:false,
    markerOptions: {
        icon: {
            url: "pathTo/icon.png", // url
            scaledSize: new google.maps.Size(48, 48) // scaled size
            }
    },

    afterParse: useTheData  
});

myParser.parse(urlArray);
}

这会将解析的每个 kml 文件的所有选项设置为相同。问题：

(1) 以这种方式使用 geoxml3 解析器将创建一个 docs[] 数组，这样我就可以使用 myParser.docs[0] 和 myParser.docs[1] 访问每个 kml 文件的解析结果，对吗？这就是我要找的'efficiency'。

(2) 如何将每个解析为具有不同属性（例如大小）的不同唯一图标的每个 kml 文件的标记图标唯一设置？

Answer 1

为每个文件创建一个新的 GeoXml3 解析器实例，在构造函数中指定所需的标记图标。

用于文件的图标在下面的数组中定义。由于您需要创建解析器的新实例来更改图标，因此您无法将 URL 的数组传递给解析器并更改该数组中每个 URL 的图标。

var icons = ["http://maps.google.com/mapfiles/ms/micons/blue.png",
  "http://maps.google.com/mapfiles/ms/micons/green.png",
  "http://maps.google.com/mapfiles/ms/micons/yellow.png",
  "http://maps.google.com/mapfiles/ms/micons/orange.png"];
function displayKml() {
  var inputs = document.getElementsByClassName('kmlfile');
  for (var i=0; i<inputs.length;i++) {
    geo = new geoXML3.parser({
      map: map,
      zoom: true,
      singleInfoWindow: true,
      markerOptions: {
        icon: icons[i]
      }
    });
    geo.parse(inputs[i].value);
  }
}

proof of concept link (with links to 3 different KML files)

proof of concept fiddle (using parseKmlString as won't work with other domain files)

代码段（由于 post 大小限制而减少了 KML）：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var myparser = new geoXML3.parser({
    map: map,
    markerOptions: {
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    }
  });
  myparser.parseKmlString(kmlStr);
  myparser = new geoXML3.parser({
    map: map,
    markerOptions: {
      icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
    }
  });
  myparser.parseKmlString(kmlStr2);
}
google.maps.event.addDomListener(window, "load", initialize);
var kmlStr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><Document><name>Massachusetts Cities</name><Folder><Placemark><name>Boston</name><description>Boston is the capital of and largest city in Massachusetts. The Boston Massacre and the Boston Tea Party occurred in Boston and led to the American Revolution.</description><LookAt><longitude>-71.05977300312775</longitude><latitude>42.35843100531216</latitude><altitude>0</altitude><heading>-2.107386233340164e-009</heading><tilt>0</tilt><range>34426.00143998101</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin9</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.05977300312775,42.35843100531217,3.1482280535562</coordinates></Point></Placemark><Placemark><name>Worcester</name><description>Worcester is known as the &quot;Heart of the Commonwealth&quot; due to its location in central Massachusetts, thus, a heart is the official symbol of the city.</description><LookAt><longitude>-71.80229299737233</longitude><latitude>42.2625930065606</latitude><altitude>0</altitude><heading>1.76716070878667e-009</heading><tilt>0</tilt><range>17233.50055269895</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin0</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.80229299737233,42.26259300656061,145.2545892926215</coordinates></Point></Placemark><Placemark><name>Springfield</name><description>Historically the first Springfield in America.</description><LookAt><longitude>-72.58981099924824</longitude><latitude>42.10148299778795</latitude><altitude>0</altitude><heading>5.040065975981161e-010</heading><tilt>0</tilt><range>17277.36855774167</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin6</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-72.58981099984295,42.10148300097482,39.44687703020819</coordinates></Point></Placemark><Placemark><name>Lowell</name><description>Lowell is known as the birthplace of the industrial revolution in the United States.</description><LookAt><longitude>-71.31617200184621</longitude><latitude>42.63342499640326</latitude><altitude>0</altitude><heading>-1.250482781337603e-009</heading><tilt>0</tilt><range>8564.451680780059</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin3</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.31617200184621,42.63342499640325,32.71923637446179</coordinates></Point></Placemark><Placemark><name>Cambridge</name><description>Cambridge is home to two internationally prominent universities, Harvard University and the Massachusetts Institute of Technology.</description><LookAt><longitude>-71.10965300713373</longitude><latitude>42.37264000434871</latitude><altitude>0</altitude><heading>-4.807793248148562e-009</heading><tilt>0</tilt><range>8600.20020650975</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin2</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.10965300713372,42.37264000434871,7.159466020276252</coordinates></Point></Placemark><Placemark><name>Brockton</name><description>Brockton is sometimes referred to as the &quot;City of Champions&quot; due to the success of native boxers Rocky Marciano and Marvin Hagler.</description><LookAt><longitude>-71.01837899995951</longitude><latitude>42.08343399824823</latitude><altitude>0</altitude><heading>2.712218004618013e-011</heading><tilt>0</tilt><range>8639.699317635228</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.0183789999595,42.08343399824823,30.29967761376449</coordinates></Point></Placemark><Placemark><name>New Bedford</name><description>New Bedford is nicknamed &quot;The Whaling City&quot; because during the 19th century it was one of the most important whaling ports in the world.</description><LookAt><longitude>-70.93420500203244</longitude><latitude>41.63621500187266</latitude><altitude>0</altitude><heading>-1.350326753898106e-009</heading><tilt>0</tilt><range>17403.47639378627</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin4</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-70.93420500203244,41.63621500187266,24.75716633283448</coordinates></Point></Placemark><Placemark><name>Fall River</name><description>Fall River is known for Battleship Cove which has the world&apos;s largest collection of World War II naval vessels.</description><LookAt><longitude>-71.15504499654021</longitude><latitude>41.70149101206891</latitude><altitude>0</altitude><heading>2.301640200787889e-009</heading><tilt>0</tilt><range>17385.8377123415</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin7</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.15504499654021,41.70149101206891,23.26129426529637</coordinates></Point></Placemark><Placemark><name>Lynn</name><description>Lynn is about 7 miles north of downtown Boston.</description><LookAt><longitude>-70.94949399981969</longitude><latitude>42.46676300410375</latitude><altitude>0</altitude><heading>1.217166471049273e-010</heading><tilt>0</tilt><range>8587.326697933368</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin5</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-70.94949399981969,42.46676300410375,14.89168526609486</coordinates></Point></Placemark><Placemark><name>Quincy</name><description>Quincy is the birthplace of U.S. Presidents John Adams and John Quincy Adams.</description><LookAt><longitude>-71.00227000742845</longitude><latitude>42.25287699598879</latitude><altitude>0</altitude><heading>-4.994952988379282e-009</heading><tilt>0</tilt><range>17236.11617372477</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin8</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.00227000742845,42.25287699598879,14.5549973299613</coordinates></Point></Placemark></Folder></Document></kml>';
var kmlStr2 = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><Document><name>GPS device</name><Snippet>Created Mon Sep  6 01:15:12 2010</Snippet><Style id="track_n"><IconStyle><Icon><href>http://earth.google.com/images/kml-icons/track-directional/track-none.png</href></Icon></IconStyle></Style><Style id="track_h"><IconStyle><scale>1.2</scale><Icon><href>http://earth.google.com/images/kml-icons/track-directional/track-none.png</href></Icon></IconStyle></Style><StyleMap id="track"><Pair><key>normal</key><styleUrl>#track_n</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#track_h</styleUrl></Pair></StyleMap><Style id="waypoint_n"><IconStyle><Icon><href>http://maps.google.com/mapfiles/kml/pal4/icon61.png</href></Icon></IconStyle></Style><Style id="waypoint_h"><IconStyle><scale>1.2</scale><Icon><href>http://maps.google.com/mapfiles/kml/pal4/icon61.png</href></Icon></IconStyle></Style><StyleMap id="waypoint"><Pair><key>normal</key><styleUrl>#waypoint_n</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#waypoint_h</styleUrl></Pair></StyleMap><Style id="lineStyle"><LineStyle><color>99ffac59</color><width>6</width></LineStyle></Style><Folder><name>Waypoints</name><Placemark><name>Alewife Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=10029&amp;lat=42.395261&amp;lng=-71.142449</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.140981,42.394907</coordinates></Point></Placemark><Placemark><name>Davis Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=11404&amp;lat=42.39662&amp;lng=-71.122527</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.122055,42.396064</coordinates></Point></Placemark><Placemark><name>Porter Square Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=13912&amp;lat=42.388353&amp;lng=-71.119159</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.119244,42.388346</coordinates></Point></Placemark><Placemark><name>Harvard Square Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=12084&amp;lat=42.373936&amp;lng=-71.118917</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.119106,42.373939</coordinates></Point></Placemark><Placemark><name>Central Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=10919&amp;lat=42.365326&amp;lng=-71.103474</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.103323,42.365163</coordinates></Point></Placemark><Placemark><name>Kendall/MIT Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=12412&amp;lat=42.362427&amp;lng=-71.086058</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.086586,42.362460</coordinates></Point></Placemark><Placemark><name>Charles/Massachusetts General Hospital Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=11048&amp;lat=42.361279&amp;lng=-71.070493</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.072080,42.361271</coordinates></Point></Placemark><Placemark><name>Park Street Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=13771&amp;lat=42.356332&amp;lng=-71.062202</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.062295,42.356197</coordinates></Point></Placemark><Placemark><name>Downtown Crossing Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=11473&amp;lat=42.355453&amp;lng=-71.060465</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.060788,42.355295</coordinates></Point></Placemark><Placemark><name>South Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=14435&amp;lat=42.352573&amp;lng=-71.055428</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.055000,42.351710</coordinates></Point></Placemark><Placemark><name>Broadway Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=10641&amp;lat=42.342793&amp;lng=-71.057117</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.057130,42.342900</coordinates></Point></Placemark><Placemark><name>Andrew Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=10062&amp;lat=42.329752&amp;lng=-71.056979</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.056960,42.329550</coordinates></Point></Placemark><Placemark><name>JFK / UMass Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=12410&amp;lat=42.321065&amp;lng=-71.052545</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.052393,42.321438</coordinates></Point></Placemark><Placemark><name>Savin Hill Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=14289&amp;lat=42.311099&amp;lng=-71.053175</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.053230,42.311307</coordinates></Point></Placemark><Placemark><name>Fields Corner Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=11781&amp;lat=42.299992&amp;lng=-71.061516</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.060708,42.300262</coordinates></Point></Placemark><Placemark><name>Shawmut Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=14352&amp;lat=42.293712&amp;lng=-71.065912</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.065782,42.292794</coordinates></Point></Placemark><Placemark><name>Ashmont Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=15481&amp;lat=42.284219&amp;lng=-71.063229</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.064219,42.285924</coordinates></Point></Placemark><Placemark><name>Cedar Grove Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=15659&amp;lat=42.279712&amp;lng=-71.060327</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.059742,42.278420</coordinates></Point></Placemark><Placemark><name>Butler Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=15660&amp;lat=42.272253&amp;lng=-71.062453</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.062768,42.272117</coordinates></Point></Placemark><Placemark><name>Milton Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=15692&amp;lat=42.270093&amp;lng=-71.067612</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.067950,42.270347</coordinates></Point></Placemark><Placemark><name>Central Avenue Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=15664&amp;lat=42.269965&amp;lng=-71.073249</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.073250,42.270013</coordinates></Point></Placemark></Folder><Folder><name>Tracks</name><Folder><name>Red Line (main)</name><Snippet/><description><![CDATA[<table><tr><td><b>Distance</b>8.4 mi</td></tr><tr><td><b>Min Alt</b>621371.192 mi</td></tr><tr><td><b>Max Alt</b>-328083986.719 ft</td></tr></table>]]></description><Folder><name>Points</name></Folder></Folder></Folder></Document></kml>';

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>

<div id="map_canvas"></div>

在一组 kml URL 上使用 geoxml3 解析器自定义标记图标

Customize marker icon using geoxml3 parser on an array of kml URLs

javascript

google-maps-api-3

geoxml3