我有大量的位置存储在数据库中，我想在指定区域内显示在Google地图上。我有大部分我想要的功能，可以在两个地方之间搜索路线，并在地图上显示数据库中的所有地图标记。
我不确定的部分是如何仅显示RouteBoxer创建的boxpolys内的标记。我从静态JSON文件中提取位置以进行测试。
var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null; // km
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(54.604008, -5.930415),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
};
var input = document.getElementById('from');
var autocomplete = new google.maps.places.Autocomplete(input);
var input2 = document.getElementById('to');
var autocomplete2 = new google.maps.places.Autocomplete(input2);
map = new google.maps.Map(document.getElementById("map"), mapOptions);
routeBoxer = new RouteBoxer();
directionService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({
map: map
});
}
function mapmarkers() {
$.getJSON('empdata.json', function(data) {
var json = data;
for (var i = 0; i < json.length; i++) {
var obj = json[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(obj.latitude, obj.longitude),
map: map,
title: obj.siteName
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
});
}
function route() {
// Clear any previous route boxes from the map
clearBoxes();
// Convert the distance to box around the route from miles to km
distance = parseFloat(document.getElementById("distance").value) * 1.609344;
var request = {
origin: document.getElementById("from").value,
destination: document.getElementById("to").value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
// Make the directions request
directionService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
// Box around the overview path of the first route
var path = result.routes[0].overview_path;
var boxes = routeBoxer.box(path, distance);
drawBoxes(boxes);
} else {
alert("Directions query failed: " + status);
}
});
mapmarkers();
}
// Draw the array of boxes as polylines on the map
function drawBoxes(boxes) {
boxpolys = new Array(boxes.length);
for (var i = 0; i < boxes.length; i++) {
boxpolys[i] = new google.maps.Rectangle({
bounds: boxes[i],
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#000000',
strokeWeight: 1,
map: map
});
}
}
// Clear boxes currently on the map
function clearBoxes() {
if (boxpolys != null) {
for (var i = 0; i < boxpolys.length; i++) {
boxpolys[i].setMap(null);
}
}
boxpolys = null;
}* {
box-sizing: border-box;
}
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font: 16px"Source Sans", helvetica, arial, sans-serif;
font-weight: 400;
}
#map {
height: calc(100vh - 80px);
width: 100vw;
position: absolute;
bottom: 0;
}<html>
<head>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBHiqPzkP8tv-Pwji2wsI6-WM5W6-O0Y78&libraries=places" type="text/javascript"></script>
<script src="http://dev.bigpixelcreative.com/maptest/js/routeboxer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body onload="initialize();">
<div id="floating-panel">
<b>Start: </b>
<input id="from" type="text" size="50">
<b>End: </b>
<input id="to" type="text" size="50">
<b>Radius: </b>
<input id="distance" type="text" size="10">
<button id="sbmtButton" onclick="route()">Search</button>
</div>
<div id="map"></div>
</body>
</html>
答案 0 :(得分：2)
开箱即用的第一个解决方案是在boxpolys和你的标记之间进行迭代，然后询问标记是否在该位置。如果是，那就把它放在地图上。
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
}
}
}
}
现在这个解决方案都是指数级的，所以你必须采取额外的措施，以使其更有效地运作。如果您使用的是地理数据库，我建议仅使用位于地图可见区域范围内的标记，以便迭代次数减少。
作为补充说明，是的，您可以向矩形类请求一个包含方法，矩形类本身没有它，但如果您要求getBounds（）方法，它将返回一个对象，即LatLngBounds。我测试了自己，但你也看了下面的链接以获取更多文档：
<强> google maps api : determine if point is inside shape
并在API DOC中： 的 https://developers.google.com/maps/documentation/javascript/reference?hl=en&csw=1#Rectangle
因为Getbounds方法返回一个LatLngBounds对象，所以看看这个额外的链接。
<强> https://developers.google.com/maps/documentation/javascript/reference?hl=en&csw=1#LatLngBounds
答案 1 :(得分：0)
您应该使用rectangle class polgyn class。containsLocation()。然后，您可以使用<!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>
函数
这样做
javascript
有关详细信息，请参阅此link