latから自動的に円または矩形を作成する方法

Question

私は次のコードを持っています。私はlatの長いパラメータで新しいページを開きます。どのように私はこのようにしたいが、私のコードは、サークル誰も私を助けて欲しいと表示されません以下の画像を参照してくださいlatlongから自動的に矩形または円を作成したいので、緯度から円を作成する方法。おかげで開発者

var myParam = location.search.split('lat=')[1] 
var res = myParam.split("&lng="); 
var lati = res[0]; 
var longi = res[1]; 

_map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: new google.maps.LatLng(lati, longi), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    disableDefaultUI: true, 
    zoomControl: true 
}); 


var citymap = { 
    chicago: { 
     center: { 
      lat: lati, 
      lng: longi 
     }, 
     population: 4856 
    } 
}; 
for (var city in citymap) { 
    var cityCircle = new google.maps.Circle({ 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: _map, 
     center: citymap[city].center, 
     radius: Math.sqrt(citymap[city].population) * 100 
    }); 

} 

I want like this editable rectangle

Answer 1

掲載されたコードの主な問題は、APIのエラー：InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a numberです。あなたは、彼らはあなたが数字に変換するparseFloatを使用することができ、数字である必要があり、文字列から座標を取得している：

var myParam = location.search.split('lat=')[1] 
var res = myParam.split("&lng="); 
var lati = parseFloat(res[0]); 
var longi = parseFloat(res[1]); 

proof of concept fiddle

コードスニペット：

var myParamLoc = "lat=42&lng=-72"; 
 
var myParam = myParamLoc.split('lat=')[1]; 
 
//var myParam = location.search.split('lat=')[1] 
 
var res = myParam.split("&lng="); 
 
var lati = parseFloat(res[0]); 
 
var longi = parseFloat(res[1]); 
 

 
_map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: new google.maps.LatLng(lati, longi), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    disableDefaultUI: true, 
 
    zoomControl: true 
 
}); 
 

 

 
var citymap = { 
 
    chicago: { 
 
    center: { 
 
     lat: lati, 
 
     lng: longi 
 
    }, 
 
    population: 4856 
 
    } 
 
}; 
 
for (var city in citymap) { 
 
    var cityCircle = new google.maps.Circle({ 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 2, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    map: _map, 
 
    center: citymap[city].center, 
 
    radius: Math.sqrt(citymap[city].population) * 100, 
 
    editable: true 
 
    }); 
 
    _map.fitBounds(cityCircle.getBounds()); 
 
}

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

は、

Answer 2

重要なビットは、正確な長方形の境界を取得しています。シカゴの中心部には1つのコーディネートがあります。人口に基づいてサイズを設定するサークル。多分、その円の境界を使って矩形に対して同じものを使うことができます。

var rectangle = google.maps.Rectangle({ 
    map: _map, 
    strokeColor: '#000000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2, 
    fillColor: '#A3E8FF', 
    fillOpacity: 0.35, 
    bounds: cityCircle.getBounds(), 
    editable: true 
});