[英]Circles on Google Maps API
I currently have markers for all of my subcontractors on a map. 我目前在地图上有所有分包商的标记。 I have a variable for each row in the database containing the number of miles they are willing to travel.
我对数据库中的每一行都有一个变量,其中包含他们愿意旅行的英里数。
How would I add the circles that cover that area? 如何添加覆盖该区域的圈子?
<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>
Your code doesn't show an attempt to add a circle but here is how you can do it: 您的代码未显示尝试添加圆的尝试,但是您可以按照以下方法进行操作:
The Circle has a radius
and a center
property: 圆具有
radius
和center
属性:
radius |
半径 | Type: number - The radius in meters on the Earth's surface
类型:数字-地球表面的半径(以米为单位)
center |
中心 | Type: LatLng - The center
类型:LatLng-中心
So you will need to convert your value from miles to meters: http://www.metric-conversions.org/length/miles-to-meters.htm 因此,您需要将您的价值从英里转换为米: http : //www.metric-conversions.org/length/miles-to-meters.htm
Example: 例:
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
});
Edit : 编辑 :
As you are using Gmaps check the reference here: https://hpneo.github.io/gmaps/documentation.html#GMaps-drawCircle 使用Gmap时,请在此处检查参考: https ://hpneo.github.io/gmaps/documentation.html#GMaps-drawCircle
So I guess you should use map.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)
});
All the other options you can use as per the google maps reference as the gmaps documentation mentions the following: 您可以根据Google Maps 参考使用的所有其他选项,因为gmaps文档提到了以下内容:
drawCircle accepts any option defined in google.maps.CircleOptions and any event defined in google.maps.Circle ('Events' section).
drawCircle接受google.maps.CircleOptions中定义的任何选项以及google.maps.Circle中的“事件”部分中定义的任何事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.