如果marker在多边形之外,则发出警报

时间:2018-02-14 03:36:26

标签: javascript api google-maps

我目前正在开发一个Web应用程序,如果系统生成的标记位于多边形之外,它将发出警报,但我的函数仅在1个多边形中工作,它在其他多边形中不起作用。我的循环中有什么问题或我错过了什么?

请参见此处的图片:sample image

这是我的功能。

function checkInPolygon(marker) {
  var infowindow = new google.maps.InfoWindow();

  for (var x = 0; x < mpa_polygon.length; x++) {
    var html = google.maps.geometry.poly.containsLocation(marker.getPosition(), mpa_polygon[x]) ? 'inside' : 'outside';
    console.log(mpa_polygon[x]);
  }
  infowindow.setContent(html);
  infowindow.open(map, marker);
}

完整的代码实现:

function displaySalesMan() {
  var names = [];
  var ids = [];
  var dateMPA = [];
  var longlat = [];
  var header = [];
  var loc = [
    []
  ];
  var newdata = [];

  $.ajax({
    url: "/geofencing/GeofencingAPI.php",
    type: "GET",
    data: {
      "type": "view_salesmanDashboard_gensan_COLOR",
      "filter_Date": getDate()
    },
    dataType: "html",
    crossDomain: true,
    cache: false,
    success: function(response) {
      var data = JSON.parse(response);
      if (response == 'No records are generated on selected salesman and date!') {
        alert('No records are found in selected date!');
        DeleteMarkers();
      } else {
        console.log(data.length);
        for (var x = 0; x < data.length; x++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(data[x].latitude, data[x].longitude),
            map: map,
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + data[x].TERRCOLOR.substr(1)
          });

          >
          i call the
          function here with a parameter ** marker **

            checkInPolygon(marker);
          markers.push(marker);

          google.maps.event.addListener(marker, 'click', (function(marker, x) {
            return function() {
              var contentString = "<div style='overflow: hidden; margin: 0 auto;'><div class='modal-header' style='text-align: center;'><div class=''><img style='height: 120px; width:120px;' alt='salesmanPic' src='img/jomar.png'></div></div>" +
                "<div class='table-responsive'>" +
                "<table class='table table-condensed'>" +
                "<tr><td>Salesman:</td><td class='bold'>" + data[x].Salesman + "</td></tr>" +
                "<tr><td>Customer:</td><td>" + data[x].Customer + "</td></tr>" +
                "<tr><td>Location:</td><td>" + data[x].longitude + ' ' + data[x].latitude + "</td></tr>" +
                "<tr><td>Delivery Date:</td><td>" + data[x].deliveryDate + "</td></tr>" +
                "</table>" +
                "</div>" +
                "</div>";
              infoWindow.setContent(contentString);
              infoWindow.open(map, marker);

            }
          })(marker, x));

        } //end for

      } //else
    } //on succjess
  }) //ajax close tag

  //checkerForSalesman(markers, mpa_polygon);
  infoWindow = new google.maps.InfoWindow;



} //display salesman funciton

1 个答案:

答案 0 :(得分:0)

根据我对你的代码的理解,对于你要问的每个标记&#34;这是第一个多边形?是的没有&#34;然后你在该标记的infowindow中插入答案...然后要求相同的标记&#34;这是在第二个多边形?是的没有&#34;等等,总是覆盖前一个多边形的前一个答案....这就是为什么它只适用于最后插入的多边形。

所以这里的解决方案会找到一种方法来为每个多边形保留单独的答案,或者选择你瞄准的是哪个多边形。

要清楚一个只有一个点的标记,只能有2个有效状态(真或假)并且你有3个多边形......这会打破方程式。例如,如果你的参考是红色多边形,那么所有标记都会显示出良好的效果......但你需要知道你所指的3个多边形中的哪一个。

希望它有意义

相关问题