在谷歌地图中根据经纬度绘制三角形

Question

我需要在谷歌地图中创建一条三角形折线。但我确实只有一个纬度和经度。因此，我刚刚创建了随机值以在谷歌地图中创建一个形状。但有时形状的差异太大了。如何绘制一个经纬度的三角形。我只是参考了这个link

这是我用来在谷歌地图中绘制三角形的代码。

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);
      } 
    }); 
}

Answer 1

您可以使用球面几何库绘制一个三角形，其顶点距地理编码点 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);
    }
  });
}

proof of concept fiddle

代码 sn-p：

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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="valtxtaddres" value="Palo Alto, CA" />
<div id="map_canvas"></div>