google maps окружность в массив координат полилинии

как получить массив координат полилинии из объекта google.maps.Circle

введите здесь описание изображения

об этом нет записи в API-документе


person Nick Sanders    schedule 02.02.2013    source источник


Ответы (2)


google.maps.Circle не содержит массива координат. Если вы хотите, чтобы google.maps.Polygon имел форму круга, вам нужно его создать.

function drawCircle(point, radius, dir) { 
  var d2r = Math.PI / 180;   // degrees to radians 
  var r2d = 180 / Math.PI;   // radians to degrees 
  var earthsradius = 3963; // 3963 is the radius of the earth in miles

  var points = 32; 

  // find the raidus in lat/lon 
  var rlat = (radius / earthsradius) * r2d; 
  var rlng = rlat / Math.cos(point.lat() * d2r); 

  var extp = new Array(); 
  if (dir==1) {
     var start=0;
     var end=points+1; // one extra here makes sure we connect the path
  } else {
     var start=points+1;
     var end=0;
  }
  for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)  
  { 
     var theta = Math.PI * (i / (points/2)); 
     ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
     ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
     extp.push(new google.maps.LatLng(ex, ey)); 
  } 
  return extp;
}

var circle = new google.maps.Polygon({
               map: map,
               paths: [drawCircle(new google.maps.LatLng(-33.9,151.2), 100, 1)],
               strokeColor: "#0000FF",
               strokeOpacity: 0.8,
               strokeWeight: 2,
               fillColor: "#FF0000",
               fillOpacity: 0.35
});

Пример

фрагмент кода:

function drawCircle(point, radius, dir) {
  var d2r = Math.PI / 180; // degrees to radians 
  var r2d = 180 / Math.PI; // radians to degrees 
  var earthsradius = 3963; // 3963 is the radius of the earth in miles

  var points = 32;

  // find the raidus in lat/lon 
  var rlat = (radius / earthsradius) * r2d;
  var rlng = rlat / Math.cos(point.lat() * d2r);


  var extp = new Array();
  if (dir == 1) {
    var start = 0;
    var end = points + 1
  } // one extra here makes sure we connect the
  else {
    var start = points + 1;
    var end = 0
  }
  for (var i = start;
    (dir == 1 ? i < end : i > end); i = i + dir) {
    var theta = Math.PI * (i / (points / 2));
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
    extp.push(new google.maps.LatLng(ex, ey));
    bounds.extend(extp[extp.length - 1]);
  }
  // alert(extp.length);
  return extp;
}

var map = null;
var bounds = null;

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  bounds = new google.maps.LatLngBounds();

  var donut = new google.maps.Polygon({
    paths: [drawCircle(new google.maps.LatLng(-33.9, 151.2), 100, 1),
      drawCircle(new google.maps.LatLng(-33.9, 151.2), 50, -1)
    ],
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });
  donut.setMap(map);

  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

person geocodezip    schedule 02.02.2013

Я реализую это внутри автозаполнения, но не могу этого понять: var points = 32; как рассчитать эту переменную?

createAutocomplete() {
    var drawer = this.drawCircle;
    var MAPS = window.Heatmap.Maps;
    const center = MAPS.map.center;
    const defaultBounds = {
        north: center.lat + 0.1,
        south: center.lat - 0.1,
        east: center.lng + 0.1,
        west: center.lng - 0.1,
    };
    let input = document.getElementById("search");
    const options = {
        bounds: defaultBounds,
        componentRestrictions: {country: "us"},
        fields: ["address_components", "geometry", "icon", "name"],
        origin: MAPS.map.center,
        strictBounds: false,
        types: ['(cities)'],
    };
    MAPS.autocomplete = new google.maps.places.Autocomplete(input, options);
    google.maps.event.addListener(MAPS.autocomplete, 'place_changed', function () {
        const selectedIndex = document.getElementById("distance").selectedIndex;
        let distance = document.getElementsByTagName("option")[selectedIndex].value;
        if (MAPS.circle.instance) {
            MAPS.circle.instance.setMap(null);
            MAPS.marker.collection['searchMarker'].setMap(null);
        }

        let place = MAPS.autocomplete.getPlace();
        var center = {lat: place.geometry.location.lat(), lng: place.geometry.location.lng()};
        MAPS.map.instance.panTo(center);
        MAPS.map.instance.setZoom(7);

        MAPS.marker.collection['searchMarker'] = new google.maps.Marker({
            position: center,
            map: MAPS.map.instance,
            icon: {
                url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
            }
        });

        MAPS.circle.instance = new google.maps.Polygon({
            map: MAPS.map.instance,
            paths: [drawer(center, distance, 1)],
            strokeColor: "#0000FF",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35
        });
        console.log(MAPS.circle.instance.getPath())
    });
}

drawCircle(point, radius, dir) {
    var d2r = Math.PI / 180;
    var r2d = 180 / Math.PI;
    var earthsradius = 3963;
    var points = 32;
    var rlat = (radius / earthsradius) * r2d;
    var rlng = rlat / Math.cos(point.lat * d2r);
    var extp = [];
    var start = null;
    var end = null;
    if (dir === 1) {
        start = 0;
        end = points + 1;
    } else {
        start = points + 1;
        end = 0;
    }
    for (var i = start; (dir === 1 ? i < end : i > end); i = i + dir) {
        var theta = Math.PI * (i / (points / 2));
        var ey = point.lng + (rlng * Math.cos(theta));
        var ex = point.lat + (rlat * Math.sin(theta));
        extp.push(new google.maps.LatLng(ex, ey));
    }
    return extp;
}
person falconshady    schedule 28.05.2021