Question

在地图上我正在创建一个应用程序（下面的链接），欧洲圈总是比拉丁美洲更大，甚至价值更低。我测试了各种形式，总是以这种方式表现出来。

圆半径如何工作？有人可以告诉我出了什么问题吗？

var citymap = {};

citymap['africa'] = {
    center: new google.maps.LatLng(-8.783195, 34.508523),
    population: 3
};
citymap['asia'] = {
    center: new google.maps.LatLng(34.047863, 100.6196553),
    population: 38
};
citymap['europe'] = {
    center: new google.maps.LatLng(54.5259614, 15.2551187),
    population: 56
};
citymap['latin_america'] = {
    center: new google.maps.LatLng(-4.4420385, -61.3268535),
    population: 61
};
citymap['northern_america'] = {
    center: new google.maps.LatLng(33.5517919, -112.8936787),
    population: 26
};
citymap['oceania'] = {
    center: new google.maps.LatLng(-22.7359095, 140.0187653),
    population: 6
};

var cityCircle;

function initialize() {

  var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(16.12916136057057, 46.50333569999997),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  for (var city in citymap) {
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100000
    };

    cityCircle = new google.maps.Circle(populationOptions);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

圆半径以米为单位。由于地图投影，赤道上的一米小于纬度上的一米。

来自wikipedia

phi LONG
0°  111.320 km
15° 107.550 km
30° 96.486 km
45° 78.847 km
60° 55.800 km
75° 28.902 km
90° 0.000 km

因此，在高纬度地区，相同大小的圆圈会显得更大。

要制作像素大小的圆圈，请使用fromPointToLatLng和fromLatLngToPoint方法的地图投影（并绘制自己的圆圈，原生google.maps.Circle使用投影）：

function drawCircle(center, radius, projection) {
    var i, angle, x1, y1;
    var circle = [];
    var point = projection.fromLatLngToPoint(center);
    var x = point.x;
    var y = point.y;
    for (var i = 0; i < 360; i += 10) {
        angle = i;
        x1 = radius * Math.cos(angle * Math.PI / 180);
        y1 = radius * Math.sin(angle * Math.PI / 180);
        circle.push(projection.fromPointToLatLng(new google.maps.Point(x + x1, y + y1)));
    }
    return circle;
}

代码段：

＆＃13;

var citymap = {};

citymap['africa'] = {
  center: new google.maps.LatLng(-8.783195, 34.508523),
  population: 4
};
citymap['asia'] = {
  center: new google.maps.LatLng(34.047863, 100.6196553),
  population: 32
};
citymap['europe'] = {
  center: new google.maps.LatLng(54.5259614, 15.2551187),
  population: 38
};
citymap['latin_america'] = {
  center: new google.maps.LatLng(-4.4420385, -61.3268535),
  population: 65
};
citymap['northern_america'] = {
  center: new google.maps.LatLng(33.5517919, -112.8936787),
  population: 24
};
citymap['oceania'] = {
  center: new google.maps.LatLng(-22.7359095, 140.0187653),
  population: 9
};

var cityCircle;

function initialize() {

  var mapOptions = {
    zoom: 1,
    center: new google.maps.LatLng(25.12916136057057, -46.50333569999997),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

  google.maps.event.addDomListener(window, 'resize', function() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(mapOptions.center);
  });
  google.maps.event.addListener(map, 'projection_changed', function() {
    var projection = map.getProjection();

    for (var city in citymap) {
      var populationOptions = {
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: citymap[city].center,
        radius: Math.sqrt(citymap[city].population) * 100000,
        path: drawCircle(citymap[city].center, Math.sqrt(citymap[city].population) * 1, projection)
      };

      cityCircle = new google.maps.Polygon(populationOptions);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

function drawCircle(center, radius, projection) {
  var i, angle, x1, y1;
  var circle = [];
  var point = projection.fromLatLngToPoint(center);
  var x = point.x;
  var y = point.y;
  for (var i = 0; i < 360; i += 10) {
    angle = i;
    x1 = radius * Math.cos(angle * Math.PI / 180);
    y1 = radius * Math.sin(angle * Math.PI / 180);
    circle.push(projection.fromPointToLatLng(new google.maps.Point(x + x1, y + y1)));
  }
  return circle;
}

＆＃13;

body {
  margin: 0;
  padding: 0
}
html,
body,
#map {
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: .9em;
  color: #fff;
}

＆＃13;

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

＆＃13;

谷歌地图圆圈 - 半径错误的大小

1 个答案: