Question

我在google map api的帮助下创建了地图。我想在给定公里的标记周围绘制圆圈。输入仅由用户提供。我必须使用文本框，一个给定位置另一个给定公里和一个按钮。我点击搜索按钮的确放置了给定位置的标记。但是，我不知道如何在标记周围绘制圆圈。

请有人帮助我！

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
        html, body, #map-canvas
        {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        .controls
        {
            margin-top: 16px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            background-color: #fff;
            padding: 0 11px 0 13px;
            width: 400px;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            text-overflow: ellipsis;
        }

     

        #type-selector
        {
            color: #fff;
            background-color: #4d90fe;
            padding: 5px 11px 0px 11px;
        }

        #type-selector label
        {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script>
        var map;

        function initialize() {
            var myLatlng = new google.maps.LatLng(13.0839, 80.2700);
            var mapOptions = {
                zoom: 7,
                center: myLatlng
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            autocomplete();
        }

        var autocomplete;
        var marker;
        function autocomplete() {
            var source = document.getElementById('start');

            autocomplete = new google.maps.places.Autocomplete(source);
            autocomplete.bindTo('bounds', map);

                marker = new google.maps.Marker({
                map: map,
                anchorPoint: new google.maps.Point(0, -29)
            });


        }


        function calcRoute() {
            marker.setVisible(false);
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                window.alert("Autocomplete's returned place contains no geometry");
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);

            } else {

                map.setCenter(place.geometry.location);
                map.setZoom(17);  // Why 17? Because it looks good.
            }

            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

        }


        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>

<div id="panel">
    <b>Search: </b>

    <input id="start" class="controls" type="text"
           placeholder="Enter a search location">

    <input id="radius" class="controls" type="text"
           placeholder="Enter km">

   <input type="button" value="Search" onclick="calcRoute();">

</div>
<div id = "map-canvas"> </div>
</body>
</html>

提前致谢!!

Answer 1

您可以使用Google Maps API中的Circle选项，如下所示 -

var circleRadius = ($('#radius').val()*1000);
if(geoCircle) {  //If the circle is already created and visible on map.
    geoCircle.setRadius(circleRadius);
    geoCircle.setCenter(marker.getPosition());
} else {    //Circle not initalized yet, so initialize and display.
    var circleOptions = {
        strokeColor: 'blue',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: 'blue',
        fillOpacity: 0.35,
        map: map, //pass the map object to show on the map.
        center: marker.getPosition(), //or you can pass a google.maps.LatLng object
        radius:parseInt(circleRadius) //radius of the circle in metres
    };
    geoCircle = new google.maps.Circle(geoCircleOptions);
}

编辑：在geoCircle函数之外定义calcRoute变量，然后在calcRoute()行之后将上述代码添加到marker.setVisible(true);函数中。我已更新代码以从#radius字段获取半径值。

希望这有帮助！

Answer 2

这方面的简单方法是google.maps.geometry.spherical命名空间中的computeOffset(from:LatLng, distance:number, heading:number, radius?:number)函数，请参阅this

然后用中心绘制折线，绘制半径为此偏移的普通圆形代码。

如何在google map api中为标记给定半径绘制圆圈

2 个答案: