2016-02-24 3 views
0

Я пытаюсь написать программу, которая рисует прямоугольник вокруг двух точек. Отходя от Google Maps example, я хочу нарисовать прямоугольник вокруг станции Пенн (40.7506, 73.9939) и мэрии (40.7127, 74.0059). По сути, я хотел подражать это кадрирование из двух мест:Нарисуйте прямоугольник, зная только две точки

enter image description here

границы этого изображения будет прямоугольником. У меня возникает проблема с тем, что я знаю только два момента, о которых я говорил выше. Есть какой-либо способ сделать это?

+1

вы пытаетесь установить видовой экран в наименьшей области вокруг этих двух точек? –

+2

Кроме того, вы, вероятно, хотите включить путь, чтобы попасть туда, а также, верно? В противном случае у вас появятся сценарии, в которых путь может выйти за пределы прямоугольника, который соответствует двум точкам. Кроме того, вы пытаетесь захватить скриншот, эмулировать это в холсте? Дайте нам дополнительную информацию о том, что вы пытаетесь реализовать. – Brett84c

+1

Вокруг 2-х точек или по пути пути? – MrUpsidown

ответ

0

Чтобы нарисовать прямоугольник вокруг станции Penn (40.7506, 73.9939) и City Hall (40.7127, 74.0059), добавьте эти две координаты в пустой границах объекта, а затем использовать его в качестве bounds опции для google.maps.Rectangle

// Penn Station (40.7506, 73.9939) 
// City Hall (40.7127, 74.0059) 
var bounds = new google.maps.LatLngBounds(); 
var pennStation = new google.maps.LatLng(40.7506, -73.9939); 
bounds.extend(pennStation); 
var cityHall = new google.maps.LatLng(40.7127, -74.0059); 
bounds.extend(cityHall); 
var rectangle = new google.maps.Rectangle({ 
    map: map, 
    bounds: bounds 
}); 

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    // Penn Station (40.7506, 73.9939) 
 
    // City Hall (40.7127, 74.0059) 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var pennStation = new google.maps.LatLng(40.7506, -73.9939); 
 
    bounds.extend(pennStation); 
 
    var cityHall = new google.maps.LatLng(40.7127, -74.0059); 
 
    bounds.extend(cityHall); 
 
    map.fitBounds(bounds); 
 
    var rectangle = new google.maps.Rectangle({ 
 
    map: map, 
 
    bounds: bounds 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);
html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>