Question

我有大量的位置存储在数据库中，我想在指定区域内显示在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>

Answer 1

开箱即用的第一个解决方案是在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

Answer 2

您应该使用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

在区域内显示地图标记

2 个答案: