geoXML3 为标记添加自定义图标

Question

我试图在使用 geoXML3 解析 kml 文件后为标记添加自定义图标，但我不知道如何操作。我无法在 kml 文件中添加规范，因此我尝试使用 Javascript 来完成。我没有设法找到任何有用的文档。这是我的 kml 加载：

    myparser.parse('http://mywebsite.com/myparser/last_feed/now.kml');
    var myparser= new geoXML3.parser({map: map,zoom:7,icon: image});

Answer 1

要使用 geoxml3 更改所有标记图标，请按照 documentation (the markerOptions object is used to populate the MarkerOptions 中所述为所有使用创建的标记设置 markerOptions.icon 属性 geoxml3).

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

proof of concept fiddle

代码片段：

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,
    singleInfoWindow: true,
    markerOptions: {
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    }
  });
  myparser.parseKmlString(kmlStr);
}
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>';

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<div id="map_canvas"></div>

geoXML3 为标记添加自定义图标

geoXML3 add custom icon for marker

javascript

google-maps

kml

kmz

geoxml3