Javascript 在区域内显示地图标记
我在一个数据库中存储了大量的位置，当它们位于指定区域内时，我希望在谷歌地图上显示这些位置。我有我想要的大部分功能，可以在两个地方之间搜索路线，数据库中的所有地图标记都显示在地图上 我不确定的部分是如何仅显示RouteBox Xer创建的Javascript 在区域内显示地图标记,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我在一个数据库中存储了大量的位置，当它们位于指定区域内时，我希望在谷歌地图上显示这些位置。我有我想要的大部分功能，可以在两个地方之间搜索路线，数据库中的所有地图标记都显示在地图上 我不确定的部分是如何仅显示RouteBox Xer创建的BoxPoly中的标记。出于测试目的，我从静态JSON文件中提取位置 var-map=null； var-boxpolys=null； var方向=null； var routeBoxer=null； 变量距离=null；//公里 函数初始化（）{ 变量映射选项
BoxPolyvar-map=null；
var-boxpolys=null；
var方向=null；
var routeBoxer=null；
变量距离=null；//公里
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（54.604008，-5.930415），
mapTypeId:google.maps.mapTypeId.ROADMAP，
缩放：8
};
var input=document.getElementById（'from'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
var input2=document.getElementById（'to'）；
var autocomplete2=新的google.maps.places.Autocomplete（input2）；
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
routeBoxer=新的routeBoxer（）；
directionService=new google.maps.directionService（）；
directionsRenderer=新建google.maps.directionsRenderer({
地图：地图
});
}
函数mappmarkers（）{
$.getJSON（'empdata.json'，函数（数据）{
var json=数据；
for（var i=0；i*{
框大小：边框框；
}
身体{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
字体：16px“源无”，helvetica，arial，无衬线；
字体大小：400；
}
#地图{
高度：计算（100vh-80px）；
宽度：100vw；
位置：绝对位置；
底部：0；
}
开始：
完:
半径：
搜寻
rectangle classpolgyn classcontainsLocation（）<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon arrays</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 24.886, lng: -70.269},
zoom: 5,
});
var triangleCoords = [
{lat: 25.774, lng: -80.19},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});
google.maps.event.addListener(map, 'click', function(e) {
var resultColor =
google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ?
'red' :
'green';
new google.maps.Marker({
position: e.latLng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColor,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=initMap"
async defer></script>
多边形阵列
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
//此示例需要几何图形库。包括库=几何图形
//第一次加载API时的参数。例如：
//
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:24.886，lng:-70.269}，
缩放：5，
});
var triangleCoords=[
{lat:25.774，lng:-80.19}，
{lat:18.466，lng:-66.118}，
{lat:32.321，lng:-64.757}
];
var bermudaTriangle=新的google.maps.Polygon（{path:triangelecoords}）；
google.maps.event.addListener（映射，'click'，函数（e）{
结果颜色=
google.maps.geometry.poly.ContainesLocation（如latLng、百慕大角）？
“红色”：
“绿色”；
新的google.maps.Marker({
职位：e.latLng，
地图：地图，
图标：{
路径：google.maps.SymbolPath.CIRCLE，
fillColor:resultColor，
不透明度：.2，
strokeColor:'白色'，
冲程重量：.5，
比例：10
}
});
});
}
有关更多信息，请参见此开箱即用的第一个解决方案是在BoxPoly和标记之间进行迭代，然后询问标记是否在该位置。如果是，那么把它放在地图上
function containsinrectangle(boxpolys){
for (var i = 0; i < json.length; i++) {
var obj = json[i];
for (var a = 0; i < boxpolys.length; i++) {
// Ask if the position exist in the rectangles
// take note I am using the rectangle class's methods
if(boxpolys[a].getBounds().contains(new google.maps.LatLng(obj.latitude,obj.longitude))){
//do your routine to create the marker
}
}
}
函数包含矩形（boxpolys）{
for（var i=0；i