Круги расположены случайным образом, оборачивая фиксированные маркеры - PullRequest
Новая
       24

Круги расположены случайным образом, оборачивая фиксированные маркеры

0 голосов
/ 11 ноября 2018

Положение:

Я играю в игру, используя Google Maps API v3. У меня есть несколько фиксированных маркеров на карте, и я могу поставить по центру окружающие их круги.

Что мне действительно нужно:

Чтобы поместить эти круги в случайное положение , обертывающие фиксированные маркеры. Я имею в виду один круг для каждого маркера и каждый раз в другом положении, но каждый раз следует обернуть маркер.

Есть идеи?

Обновление

Что вы подразумеваете под "упаковкой фиксированного маркера"?

Я имею в виду, что маркер будет находиться в фиксированной позиции (его позиция будет загружена из файла геоджона). Но круг должен располагаться случайным образом, так как он всегда охватывает / оборачивает маркер.

Содержит ли каждый круг один или несколько маркеров или один круг содержит их все?

Каждый круг содержит только один маркер.

Насколько большие круги?

Размер тоже будет случайным. Так что 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 Ответ

0 голосов
/ 28 ноября 2018

Вот как мне удалось решить мою проблему: 

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}
}

Эта функция получит центральные точки широты и долготы (в моем случае это центр моего круга, который является фиксированным местом) и радиус круга, который нам нужно позиционировать. Затем функция вычислит новый случайный объект latLng внутри этого радиуса и возвращает тот объект, который можно использовать для установки нового центра круга.

Таким образом, я могу всегда держать свой круг вокруг своей исходной точки (первоначальный центр) , но в произвольном положении каждый раз.

Примеры: enter image description hereenter image description here

...