How do I add circles with varying radii around KML data points?

问题

I have a list of addresses that need to be placed on a map and displayed with a circle around each of varying radii.

I have a KML file listing all of my points and I want to add a 'radius' custom field within the KML and be able to draw a circle around each point based on the custom field.

Am I on the right track or is there an easier way to do this?

回答1:

Depends on how many addresses you have. If your KML file is a couple of megs large, then you might be on the right track. However, KmlLayer in the Google Maps API doesn't give you direct access to the data in the points, so your plan to add a radius custom field won't work. It seems like you might be better off rendering the individual points as addresses. These are some articles that might be helpful: https://developers.google.com/maps/articles/toomanymarkers https://developers.google.com/maps/articles/phpsqlsearch_v3 https://developers.google.com/maps/articles/phpsqlgeocode

And then creating a circle object around it.

回答2:

It is very possible to draw circles around KML Placemarks. I used the geoxml3 processor. First,

• geoxml3 uses Ajax, so testing by opening your map HTML from the browser won't work.
• I recommend downloading the following version of geoxml3, which is what worked for me: http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js

There is another version for kmz files, and "network_link". (I haven't tried these).

There is bad news, which is I concluded there's no way to insert custom tags and have geoxml3 find them. So, to make the circle radii variable, you need to place that information in the "description" tag and parse, using regular expressions if you are combining data. There are two other less appropriate options: "Name" and "styleUrl".

This is the simple page I put together. https://files.nyu.edu/hc742/public/googlemaps/kmlcircle.html

The javascript looks like this, the important part is defining the "createMarker" callback function in the geoXml options.

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="geoxml3.js"></script>
  <script type="text/javascript">
  var map;
  var geoXml = null;
  var mapOptions = { center: new google.maps.LatLng(39.370, -100.0), zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP };

  function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    geoXml = new geoXML3.parser({
      map: map, 
      createMarker: addCircle});

    geoXml.parse('https://files.nyu.edu/hc742/public/googlemaps/simple.kml')
  }


  function addCircle(placemark) {
    //rad = parseFloat(placemark.description);
    rad = parseFloat(placemark.styleUrl);
    marker = new google.maps.Marker({map:map, position:placemark.latlng});
    circle = new google.maps.Circle({map:map, center: placemark.latlng, radius: rad}); 
  }

  google.maps.event.addDomListener(window, 'load', initialize);
  </script>

With this KML:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
  <Document>
    <name>simple</name>
    <description>nothing</description>

    <Placemark>
      <name>simple</name>
      <description>2000</description>
      <styleUrl>8000</styleUrl>

      <Point>
        <coordinates>-122.0822035425683,37.42228990140251,1220</coordinates>
      </Point>
    </Placemark>

    <Placemark>
      <name>simple</name>
      <description>5001</description>
      <styleUrl>3000</styleUrl>
      <Point>
        <coordinates>-122.0822035425683,37.22228990140251,4330</coordinates>
      </Point>
    </Placemark>

    <Placemark>
      <name>C</name>
      <description>9001</description>
      <styleUrl>2000</styleUrl>

      <Point>
        <coordinates>-122.00000000001,37.000000000001,9001</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>

来源：https://stackoverflow.com/questions/10058559/how-do-i-add-circles-with-varying-radii-around-kml-data-points