Question

我有以下代码，我用lat long参数打开新页面。如何从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

重要的是让矩形的边界正确。你真的不想说你想怎么做 - 你有一个芝加哥中心的单一坐标。您根据人口设置其大小的圆圈。也许我们可以使用那个圆圈的边界来计算矩形的相同内容。

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

Answer 2

发布的代码的主要问题是来自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

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何从lat long自动创建圆形或矩形

2 个答案: