代码之家 › 专栏 › 技术社区 › sdlins

环绕固定标记的随机放置圆圈

maps google-maps-api-3 google-maps javascript

-2

sdlins · 技术社区 · 7 年前

情况:

我正在用谷歌地图API v3做一个游戏。我有很多 固定的 地图上的标记,我可以 居中的 用圆圈把它们包起来。

我真正需要的是:

把那些圆圈 随机定位 包装固定的标记。我的意思是每个标记和每次都有一个圆圈处于不同的位置但是 每一次 应该把记号笔包起来。

有什么想法吗?

使现代化

你说的“包装固定标记”是什么意思?

我的意思是,标记将位于固定位置(其位置将从geojson文件加载)。但是这个圆圈应该随机定位,因为它始终围绕着标记。

每个圆是包含一个或多个标记,还是一个圆包含所有标记?

每个圆只包含一个标记。

圆圈有多大?

大小也将是随机的。所以 radius 两者之间可能有任何价值 1000 和 50000 .

守则的有关部分:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style>
        html,
        body,
        #map {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var gMap

        var gCenter = {
            lat: -15.793987,
            lng: -47.882794
        }

        var gStyles = {
            fillColor: 'red',
            fillOpacity: 0,
            strokeOpacity: 0,
            strokeWeight: 1,
            zIndex: 100
        }

        function initMap() {
            gMap = new google.maps.Map(document.getElementById('map'), {
                center: gCenter,
                zoom: 13.5,
                disableDoubleClickZoom: true,
                styles: gStyles
            })

            ... 
            
            bootstrap()
        }

        function bootstrap() {
            ...

            var someMarker = new google.maps.Marker({
                position: gCenter,
                map: gMap,
                title: 'Some Point',
                visible: true
            })

            var circle = new google.maps.Circle({
                map: gMap,
                center: gCenter, // <-- How to calculte randomly center here based in my someMarker position?
                radius: 100000, 
                fillColor: 'red',
                fillOpacity: 1,
                strokeWeight: 1,
                strokeOpacity: .5,
                strokeColor: 'red'
            });

            ...
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXX_API_XXXX&callback=initMap">
    </script>
</body>

</html>

1 回复 | 直到 6 年前

sdlins 7 年前

我就是这样设法解决问题的:

calculateRandomCenter(lat, lng, radius) {
    let random = Math.random()
    let a = random * 2 * Math.PI
    let r = radius * Math.sqrt(random) / 120000 // this value is approximate

    let nLat = r * Math.cos(a) + lat
    let nLng = r * Math.sin(a) + lng

    return {lat: nLat, lng: nLng}
}

该函数将接收一个中心lat和lng点(在我的例子中,我的圆心是一个固定的位置)以及我们需要定位的圆半径。然后,该函数将计算该半径内的新随机latLng对象,并返回可用于设置新圆心的对象。

这样我就可以使我的圆始终围绕着我的原点(原点) 但是每一次都是随机定位的。

例如: