Question

情况：

我正在使用Google Maps API v3进行游戏。我在地图上有多个 fixed 标记，可以将居中包裹它们的圆圈。

我真正需要的是

要放置这些圆圈随机放置并包裹固定标记。我的意思是每个标记每次都有一个圆圈放置在不同的位置，但每次都应包裹标记。

有什么想法吗？

更新

“包裹固定标记”是什么意思？

我的意思是，标记将处于固定位置（将从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>

Answer 1

这是我设法解决问题的方法：

Vagrant.configure("2") do |config|
  config.vm.box = "bento/centos-7.4"
  config.vm.synced_folder "./website", "/var/www/html/", :mount_options => ["dmode=777", "fmode=777"], owner: "apache", group: "apache"
  config.vm.network "private_network", ip: "192.168.50.4"
  ## Bootstrap script to provision box.  All installation methods can go here. 
  config.vm.provision "shell" do |s|
    s.path = "bootstrap.sh"
  end
end

该函数将接收一个中心纬度和经度点（在我的情况下是我的圆的中心，这是一个固定的位置）和我们需要定位的圆的半径，然后该函数将计算一个新的在该半径内随机放置latLng对象，然后返回该对象，该对象可用于设置新的圆心。

这样，我可以始终将圆保持在原始点（原始中心）附近，但每次都会随机定位。

示例：

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

更新

代码的相关部分：

1 个答案: