Question

我有一组关于地震的数据，我需要使用圆圈在谷歌地图上显示它。起初我用标记来确保地图正常工作。标记显示正常。然后我尝试绘制一定半径的圆圈并与标记坐标相同，不幸的是它们没有被淹没。我找到了谷歌的美国城市圈子教程，这是正确的。

经过一些测试，我明白我的问题与点坐标有关。我不能说坐标有什么问题，因为它们是对象{ lat: val, lng: val }并且没有任何错误，只是不显示圆圈。

我做了gist（请不要窃取我的api密钥:)），以便您可以自己查看。希望有人在谷歌地图上有足够的经验知道这是错误的（看起来没有其他方法可以理解这个问题）。我是第一次使用谷歌地图。

Answer 1

根据geocodezip的建议，如果计算出的半径为＆＃39;值太小可能是不绘制圆的原因。根据下面的计算，无线电计算为2的3.3或2的功率上升到3.3（幅度），这是9.849除以2 = 4.924这是我想的圆形小。

<强>计算： radius：Math.pow（2，testEvents [event] .magnitude）/ 2.0

所以我将所有testEvents对象的幅度值增加到17.3,17.4,15.4,15.3 现在我能够看到那些标记的圆圈;看到附加的屏幕截图。附带小提琴链接。

[![<!DOCTYPE html>
<html>
<head>

</head>
<style>
.map {
    height: 500px;
}
</style>
<body>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div>
    <div class="row">
        <div class="col-md-6 map" id="map1"></div>
        <div class="col-md-6 map" id="map2"></div>
    </div>
</div>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script async defer
            src="https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initMap">
</script>


<script>
var map1;
var map2;

var citymap = {
    chicago: {
        center: { lat: 41.878, lng: -87.629 },
        population: 2714856
    },
    newyork: {
        center: { lat: 40.714, lng: -74.005 },
        population: 8405837
    },
    losangeles: {
        center: { lat: 34.052, lng: -118.243 },
        population: 3857799
    },
    vancouver: {
        center: { lat: 49.25, lng: -123.1 },
        population: 603502
    }
};

var testEvents = {
    0: {
        point: { lat: 85.09, lng: 15.91 },
        magnitude: 17.3
    },
    1: {
        point: { lat: 84.22, lng: 2.85 },
        magnitude: 17.4
    },
    2: {
        point: { lat: 85.04, lng: 11.79 },
        magnitude: 15.4
    },
    3: {
        point: { lat: 85.25, lng: 13.22 },
        magnitude: 15.3
    }
};

function initMap() {
    map1 = new google.maps.Map(document.getElementById('map1'), {
        zoom: 2,
        center: new google.maps.LatLng(74.370702, 34.767772),
        mapTypeId: 'satellite'
    });
    map2 = new google.maps.Map(document.getElementById('map2'), {
        zoom: 2,
        center: new google.maps.LatLng(74.370702, 34.767772),
        mapTypeId: 'satellite'
    });

    WriteQuakeEvents();
}

function WriteQuakeEvents() {
      for (var city in citymap) {
        // Add the circle for this city to the map.
        var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map2,
            center: citymap\[city\].center,
            radius: Math.sqrt(citymap\[city\].population) * 100
        });
    }

    for (var event in testEvents) {
        var marker = new google.maps.Marker({
            position: testEvents\[event\].point,
            map: map1
        });
        var circle = new google.maps.Circle({
            strokeColor: '#FFFFFF',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.2,
            map: map1,
            center: testEvents\[event\].point,
            radius: Math.pow(2, testEvents\[event\].magnitude) / 2.0
        });
    }
}
</script>

</div>
</body>
</html>][1]][1]

//Fiddle here:

Google地图不会显示具有特定坐标的圆圈

1 个答案: