Google Maps API 上的圈子答案

【问题标题】：Circles on Google Maps APIGoogle Maps API 上的圈子
【发布时间】：2015-09-01 21:11:48
【问题描述】：

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

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

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

【问题讨论】：

我删除了我之前的评论，服务器端方面确实让这有点模棱两可，我想；这是圈子的文档参考链接：developers.google.com/maps/documentation/javascript/examples/…
愿意旅行的里程的“变量”（列）的名称是什么？是VendorApps上的列吗？
是的，它是一个整数 $vendor_miles
我最关心的是javascript代码，而不是PHP
对于因过于宽泛而投票结束此问题的人应该阅读帮助部分。

标签： javascript php google-maps-api-3 gmaps.js

【解决方案1】：

您的代码没有显示添加圆圈的尝试，但您可以这样做：

Circle 有一个 radius 和一个 center 属性：

半径 |类型：数字 - 地球表面的半径（以米为单位）

居中 |类型：LatLng - 中心

检查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 maps reference 使用的所有其他选项，因为 gmaps 文档提到以下内容：

drawCircle 接受 google.maps.CircleOptions 中定义的任何选项和 google.maps.Circle 中定义的任何事件（“事件”部分）。

【讨论】：