javascript - グーグルは円をポリライン座標配列にマップします

Question

google.maps.Circleのオブジェクトからポリライン座標の配列を取得する方法

それに関するAPIドキュメントエントリはありません

Answer 1

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>

Answer 2

これをオートコンプリート内に実装しましたが、これを理解できません。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;
}