Google 地图上的圈子 API

Question

我目前在地图上标记了我所有的分包商。我在数据库中的每一行都有一个变量，其中包含他们愿意旅行的英里数。

如何添加覆盖该区域的圆圈？

<script>
    /*
     * MAP 2
     */
    jQuery(function() {
        "use strict";

        // init map
        var map = new GMaps({
            div: '#applicantLocation',
            lat: 39.8282,
            lng: -85.4373943,
            zoom: 4
        });

        <?php

            $sql = "SELECT * FROM vendorApps ORDER BY `dateReceived` DESC";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            include "includes/php/getTimeAgo.php";
            // output data of each row
            while($row = $result->fetch_assoc()) {
                $zip    = $row["zip"];
                $getZip = "SELECT `lat` , `lng` FROM `zips` WHERE `zip` =  \"$zip\" ";
                $getZipResult = $conn->query($getZip);

                if ($getZipResult->num_rows > 0) {
                    // output data of each row
                    while($getZipRow = $getZipResult->fetch_assoc()) {

                        $vendor_lat = $getZipRow['lat'];
                        $vendor_lng = $getZipRow['lng'];

                        $link = '<a href="applicantProfile.php?appID='.$row["vendorAppID"].'">';
                        echo '

                        // add Vendor marker
                        map.addMarker({
                            lat: '.$vendor_lat.',
                            lng: '.$vendor_lng.',
                            title: "'.$row["fName"].' '.$row["lName"].'",
                            infoWindow: {
                                content: "'.$row["fName"].' '.$row["lName"].' is a '.$row["vendorType"].' in '.$row["city"].', '.$row["state"].'."
                            }
                        });
                        ';
                    }
                }
            }
        }
        ?>
    });
</script>

Answer 1

您的代码没有显示添加圆圈的尝试，但您可以通过以下方式进行添加：

圆圈有一个 radius 和一个 center 属性:

radius | Type: number - The radius in meters on the Earth's surface

center | Type: LatLng - The center

检查Reference。

所以您需要将您的值从英里转换为米：http://www.metric-conversions.org/length/miles-to-meters.htm

示例：

var cityCircle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    center: new google.maps.LatLng(10,20), // replace lat (10) and lng (20) with your $vendor_lat and $vendor_lng values
    radius: radius // your converted value from miles to meters
});

编辑:

如果您正在使用 Gmaps，请在此处查看参考资料： https://hpneo.github.io/gmaps/documentation.html#GMaps-drawCircle

所以我想你应该使用 map.drawCircle()

map.drawCircle({
    lat: '.$vendor_lat.',
    lng: '.$vendor_lng.',
    radius: radius // your converted value from miles to meters
    // other options go here (see below)
});

您可以根据 google 地图 reference 使用的所有其他选项，因为 gmaps 文档提到了以下内容：

drawCircle accepts any option defined in google.maps.CircleOptions and any event defined in google.maps.Circle ('Events' section).

Google 地图上的圈子 API

Circles on Google Maps API

javascript

php

google-maps-api-3

gmaps.js