多边形中点上的标记不显示

Question

我想像我遵循的这个例子一样在多边形内显示标记。

Point in polygon

但是标记没有出现。我认为我的代码中缺少，这是我保存到数据库中的坐标。

53.198524,-105.762383
53.198566,-105.765083
53.199001,-105.762314
53.199394,-105.765083
53.199409,-105.765091
53.199421,-105.762123
53.199425,-105.763580

我很感激有人可以帮助我弄清楚如何完成这项工作。

        var map;
        var polySides = 7;
        var polyLat  = new Array();

        polyLat[0]=53.198524;
        polyLat[1]=53.198566;
        polyLat[2]=53.199001;
        polyLat[3]=53.199394;
        polyLat[4]=53.199409;
        polyLat[5]=53.199421;
        polyLat[6]=53.199425;
        polyLat[7]=53.198524;


        var polyLng =  new Array();

        polyLng[0]=-105.762383;
        polyLng[1]=-105.765083;
        polyLng[2]=-105.762314;
        polyLng[3]=-105.765083;
        polyLng[4]=-105.765091;
        polyLng[5]=-105.762123;
        polyLng[6]=-105.763580;
        polyLng[7]=-105.762383;



        var maxLat = Math.max.apply(null,polyLat);
        var minLat = Math.min.apply(null,polyLat);
        var maxLng = Math.max.apply(null,polyLng);
        var minLng = Math.min.apply(null,polyLng);

        var bounds = new google.maps.LatLngBounds;
      function initialize() {

            initial = new google.maps.LatLng(53.199246241276875,-105.76864242553711);

            var mapOptions = {
                zoom: 16,
                center: initial,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE
                },
                mapTypeControl: false


            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        }



    $(function () {
            $.ajax({
                  type:'post',
                  dataType:'json',
                  data:'maxLat='+maxLat +'&minLat='+minLat +'&maxLng='+maxLng +'&minLng='+minLng,
                  url:'polygeofence.php',
                  success: function(data){

                      bounds  = new google.maps.LatLngBounds();
                      $.each(data,function(i,dat){

                                 if (pointInPolygon(polySides,polyLat,polyLng,dat.lat,dat.lng)){
                                       var latlng = new google.maps.LatLng(parseFloat(dat.lat),parseFloat(dat.lng));

                                      addMarker(latlng);
                                      bounds.extend(latlng);

                                  }

                      });
                      map.fitBounds(bounds);

                  }

            });
        });


     function pointInPolygon(polySides,polyX,polyY,x,y) {
            var j = polySides-1 ;
            oddNodes = 0;
            for (i=0; i<polySides; i++) {
                if (polyY[i]<y && polyY[j]>=y  ||  polyY[j]<y && polyY[i]>=y) {
                    if (polyX[i]+(y-polyY[i])/(polyY[j]-polyY[i])*(polyX[j]-polyX[i])<x)  {
                        oddNodes=!oddNodes;
                    }
                }
                j=i;
            }

            return oddNodes;
        }

     function addMarker(latlng){
            marker = new google.maps.Marker({
                position: latlng,
                map: map,
                draggable: false

            });
          marker.setMap(map);
     }







        google.maps.event.addDomListener(window, 'load', initialize);

php代码

   $minlat = $_POST['minLat'];
   $maxlat = $_POST['maxLat'];
   $minlng = $_POST['minLng'];
   $maxlng = $_POST['maxLng'];

   $queryresult = mysql_query("SELECT * FROM geofencetbl WHERE
                    (lat>='$minlat' AND lat<='$maxlat')
                    AND (lng>='$minlng' AND lng<='$maxlng')
                  ");






 $results = array(
      'lat' => array(),
      'lng' => array(),
  );

  while($row=mysql_fetch_array($queryresult,MYSQL_BOTH)){
      $results['lat'][] =$row['lat'];
      $results['lng'][] =$row['lng'];


  }




   echo  json_encode($results);

编辑：编辑我的代码后，我的成功有问题 dat.lat 和 dat.lng 未定义

Answer 1

您的代码中有很多问题。您缺少许多变量声明和其他内容。

我这样评论了我的大部分更改：

// missing bounds object here
var bounds = new google.maps.LatLngBounds();

我删除了 AJAX 部分，因为它当然不起作用。我只是在创建一个标记。没有多边形。但至少这表明您将正确的 LatLng 对象传递给 addMarker() 函数。

希望这会有所帮助！

JSFiddle demo

编辑：

这是您应该如何创建 JSON 输出的方法。

$sql = "SELECT * FROM geofencetbl WHERE (lat>='$minlat' AND lat<='$maxlat') AND (lng>='$minlng' AND lng<='$maxlng')";

$result = $db->query($sql) or die($db->error);

while ($obj = $result->fetch_object()) {

    $results[] = $obj;
}

echo json_encode($results);

那么在你的AJAX成功函数中，登录dat你就应该明白怎么处理了！