如何将多条折线添加到现有地图

时间:2014-06-25 18:35:06

标签: google-maps

我有以下地图,我想为城市的区域边界创建多条折线。有没有人有任何建议?

我正在试图弄清楚要做什么,但我遇到了问题。

<script type="text/javascript">
var locations = [
['Walk-In Clinic at 911 Yates Street, Victoria ',48.4255021,-123.3582085],
['Walk-In Clinic at 1105 Pandora Avenue, Victoria ',48.4266277,-123.3530197],
['Walk-In Clinic at 1640 Oak Bay Avenue, Victoria ',48.4266361,-123.3345531],
['Walk-In Clinic at 835 Langford Parkway, Victoria ',48.4414069,-123.5048409],

];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(48.4255021, -123.3582085),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

if (GBrowserIsCompatible()) {

  // === The basis of the arrow icon information ===
  var arrowIcon = new GIcon();
  arrowIcon.iconSize = new GSize(24,24);
  arrowIcon.shadowSize = new GSize(1,1);
  arrowIcon.iconAnchor = new GPoint(12,12);
  arrowIcon.infoWindowAnchor = new GPoint(0,0);

  // === Function to create a marker arrow ===
  function createMarker(point,icon) {
    var marker = new GMarker(point,icon);
    map.addOverlay(marker)
  }

  // === Returns the bearing in degrees between two points. ===
  // North = 0, East = 90, South = 180, West = 270.
  var degreesPerRadian = 180.0 / Math.PI;
  function bearing( from, to ) {
    // See T. Vincenty, Survey Review, 23, No 176, p 88-93,1975.
    // Convert to radians.
    var lat1 = from.latRadians();
    var lon1 = from.lngRadians();
    var lat2 = to.latRadians();
    var lon2 = to.lngRadians();

    // Compute the angle.
    var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ),             Math.cos      (       lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
    if ( angle < 0.0 )
 angle  += Math.PI * 2.0;

    // And convert result to degrees.
    angle = angle * degreesPerRadian;
    angle = angle.toFixed(1);

    return angle;
  }

  // === A function to create the arrow head at the end of the polyline ===


  // create the map
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(49.191352,-122.890491), 9);

  // === The array of points for the polyline ===
  var points = [ new GLatLng(49.191352,-122.890491), new GLatLng(49.090506,-  122.869377)];
  // === Create the polyline
  map.addOverlay(new GPolyline(points));
  // === add the arrow head



  // === Another one ===
  var points = [new GLatLng(49.181268,-122.690377), new GLatLng(49.002299,-122.691168)];
  map.addOverlay(new GPolyline(points));
  // === this time with arrows on the midlines



}

else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}

</script>
</body>
</html>

0 个答案:

没有答案