Aby křivky ukázat na google mapě vodorovně a zoom do centra koordinovat

0

Otázka

Já jsem pomocí Google Maps API JavaScript. Můj use case je potřebuji vykreslit souřadnice (lat, lng) na mapy (vytvořit markery) a připojit se k nim přes křivku. Souřadnice budou velmi blízko sebe, takže když se snažím pozemku je, že se skrývá za první ukazatel. Tak jsem zjistil, centrum a snaží se přiblížit tak, že všechny značky budou viditelné na mapě. Kdysi jsem kroky, aby najít centrum, ale nejsem schopen se přiblížit k centru koordinovat. Použil jsem mapu.fitBounds(latlng); To se hodí souřadnice na obrazovce. Ale to, co chci dosáhnout je, aby se lomená čára (spojující všechny koordinovat) vždy horizontální a zoom je to střed koordinovat.

enter code herevar bounds = new google.mapy.LatLngBounds();

for (i = 0; i < temp.length; i++) {
   bounds.extend(temp[i]);
}
var latlng = bounds.getCenter();
map.setCenter(latlng);

Jako souřadný bude vždy jiný, lomená čára bude v každém směru, ale vždycky jsem chtěl ukázat, že vodorovně na mapě. to, co jsem dostal : zadejte popis obrázku zde

to, co chci dosáhnout:

zadejte popis obrázku zde

Nějaké návrhy ocení. Díky Předem.

1

Nejlepší odpověď

0

Jsem dosáhnout něčeho, jako je tento pomocí následujících kroků:

  1. Použití computeHeading() funkce Geometrie knihovna se dostat úhel od první do poslední koordinovat na trati. Ujistěte se, že přidat &libraries=geometry do své Mapy JS script tag.
  2. Jakmile se dostanete na čísla, můžete použít mapu.setHeading() funkce změnit úhel pohledu a po nějaké zkušebnictví,vidím, že můžete dosáhnout horizontální pohled odečtením na 90 stupňů.

Tady je ukázkový kód a fragment kódu níže:

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40.756795,
      lng: -73.954298
    },
    zoom: 16,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });


//array of your points
 const markerCoordinates = [
   { lat: 40.758481, lng: -73.958269 },
    { lat:40.754649, lng: -73.949563 },
   
  ];
    
    //creating marker from your points
  for (let i = 0; i < markerCoordinates.length; i++) {
    const marker = markerCoordinates[i];

    new google.maps.Marker({
      position:marker,
      map,
    });
  }
   
   //creating polyline from your points
  const createdPolyline = new google.maps.Polyline({
    path: markerCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  createdPolyline.setMap(map);
  
  //get the heading(angle) of the first coordinate from the last coordinate
const heading = google.maps.geometry.spherical.computeHeading(
    markerCoordinates[0],
    markerCoordinates[1]
  )
    
//once you get the heading subtract it by 90 to get a horizontal view
   map.setHeading(heading-90)
}

2021-11-23 06:38:44

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................