Нарисуйте треугольник на основе широты и долготы на карте Google - PullRequest
Новая
       88

Нарисуйте треугольник на основе широты и долготы на карте Google

0 голосов
/ 12 июня 2018

Мне нужно создать треугольную многоугольную линию на карте Google.Но у меня есть только одна широта и долгота.Следовательно, я просто создал случайное значение, чтобы создать форму на карте Google.Но иногда формы получают слишком много различий.Как нарисовать треугольник по одной широте и долготе.Я только что взял ссылку из этой ссылки

Вот мой код, который я использовал, чтобы нарисовать форму треугольника на карте Google. 

var geocoder = new google.maps.Geocoder();
var address = document.getElementById('valtxtaddres').value;
console.log("Address is:"+address);
if(address!=''){
geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        var latitude = results[0].geometry.location.lat().toString();
        var longitude = results[0].geometry.location.lng().toString();
       // alert(latitude);
       console.log("Lng is:"+longitude);
        console.log("Math value:"+(Math.floor(Math.random()*90000) + 10000));
        var triangle2Lat = latitude.slice(0, latitude.length-5)+(Math.floor(Math.random()*90000) + 10000);
        var triangle2Lng = longitude.slice(0, longitude.length-11)+(Math.floor(Math.random()*90000) + 10000);
        var triangle3Lat = latitude.slice(0, latitude.length-5)+(Math.floor(Math.random()*90000) + 10000);
        var triangle3Lng = longitude.slice(0, longitude.length-11)+(Math.floor(Math.random()*90000) + 10000);
         console.log("triangle2Lat is:"+triangle2Lat);
        console.log("triangle2Lng is:"+triangle2Lng);
        console.log("triangle3Lat is:"+triangle3Lat);
        console.log("triangle3Lng is:"+triangle3Lng); 
        var triangleCoords = [
            new google.maps.LatLng(latitude, longitude),
            new google.maps.LatLng(triangle2Lat, triangle2Lng),
            new google.maps.LatLng(triangle3Lat, triangle3Lng)
          ];
myPolygon = new google.maps.Polygon({
    paths: triangleCoords,
    draggable: true, // turn off if it gets annoying
    editable: true,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  myPolygon.setMap(gmap);
      } 
    }); 
}

1 Ответ

0 голосов
/ 12 июня 2018

Вы можете использовать библиотеку сферической геометрии, чтобы нарисовать треугольник с вершинами в 250 метрах от геокодированной точки в 0 градусов (север), 120 градусов (юго-восток) и -120 градусов (юго-запад). 

var geocoder = new google.maps.Geocoder();
var address = document.getElementById('valtxtaddres').value;
console.log("Address is:" + address);
if (address != '') {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var triangle1 = google.maps.geometry.spherical.computeOffset(results[0].geometry.location, 250, 0);
      var triangle2 = google.maps.geometry.spherical.computeOffset(results[0].geometry.location, 250, 120);
      var triangle3 = google.maps.geometry.spherical.computeOffset(results[0].geometry.location, 250, -120);
      var triangleCoords = [triangle1, triangle2, triangle3];
      myPolygon = new google.maps.Polygon({
        path: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
      });
      myPolygon.setMap(gmap);
    }
  });
}

подтверждение концепции скрипта

screenshot of resulting map

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

function initialize() {
  var gmap = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var geocoder = new google.maps.Geocoder();
  var address = document.getElementById('valtxtaddres').value;
  console.log("Address is:" + address);
  if (address != '') {
    geocoder.geocode({
      'address': address
    }, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        var mark = new google.maps.Marker({
          position: results[0].geometry.location,
          map: gmap,
          title: "C",
          icon: {
            url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
            size: new google.maps.Size(7, 7),
            anchor: new google.maps.Point(3.5, 3.5)
          }
        });
        var triangle1 = google.maps.geometry.spherical.computeOffset(results[0].geometry.location, 250, 0);
        var triangle2 = google.maps.geometry.spherical.computeOffset(results[0].geometry.location, 250, 120);
        var triangle3 = google.maps.geometry.spherical.computeOffset(results[0].geometry.location, 250, -120);
        console.log("triangle1 is:" + triangle1.toUrlValue(6));
        console.log("triangle2 is:" + triangle2.toUrlValue(6));
        console.log("triangle3 is:" + triangle3.toUrlValue(6));
        var triangleCoords = [triangle1, triangle2, triangle3];
        myPolygon = new google.maps.Polygon({
          path: triangleCoords,
          // draggable: true, // turn off if it gets annoying
          // editable: true,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });

        myPolygon.setMap(gmap);
      }
    });
  }
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#map_canvas {
  height: 90%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<input id="valtxtaddres" value="Palo Alto, CA" />
<div id="map_canvas"></div>
...