Question

我有一个带有wp_query的高级搜索页面，并且我正在开发一个过滤器，以搜索半径为km的房地产。

我有一个google地图，其中显示了一个半径为半径的圆形和一组标记。如果圆圈内有一个标记，则会显示出来。

我需要将WordPress的查询与Google的结果相关联。

非常感谢

这是代码：

`<script>
 function initialize() {

var address = getAllUrlParams().cittabaseraggio;;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, 

function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
  var Lat = results[0].geometry.location.lat();
  var Lng = results[0].geometry.location.lng();
  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.roadmap,
    zoom: 10,
    center: new google.maps.LatLng(Lat, Lng)
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
} else {
  alert("Something got wrong " + status);
}

var radius_circle = 10000; // 10km
var markerPositions = [
  <?php     
    $wp_query = new WP_Query( $search_query );
    if( $wp_query->have_posts() ){
        while( $wp_query->have_posts() ) : $wp_query->the_post();
        // CAMPI COORDINATE
        $coordinate = get_field('coordinate');
        $codice = get_field('informazioni_base');
        echo '{lat: ' . $coordinate['latitudine'] . ', lng: ' . $coordinate['longitudine'] . '},';
    endwhile;
}?>
];

var markers=[];
var circle = drawCircle(mapOptions.center, radius_circle);

for (var i=0; i<markerPositions.length; i++) {
  markers.push(
    new google.maps.Marker({
      position: new google.maps.LatLng(markerPositions[i].lat, markerPositions[i].lng),
      map: map,
    })
  );
}

  for (var i=0; i<markerPositions.length; i++) {
    var distance = calculateDistance(
      markers[i].getPosition().lat(),
      markers[i].getPosition().lng(),
      circle.getCenter().lat(),
      circle.getCenter().lng(),
      "K"
    );
    if (distance * 1000 < radius_circle) {  // radius is in meter; distance in km
      markers[i].setIcon('http://maps.gstatic.com/mapfiles/icon_green.png');
    }
    else {
        markers[i].setMap(null);
        alert(markers[i].getPosition());
    }
  }

function drawCircle(center, radius) {
  return new google.maps.Circle({
    strokeColor: '#0000FF',
    strokeOpacity: 0.7,
    strokeWeight: 1,
    fillColor: '#0000FF',
    fillOpacity: 0.15,
    draggable: true,
    map: map,
    center: center,
    radius: radius
  });
}

function calculateDistance(lat1, lon1, lat2, lon2, unit) {
  var radlat1 = Math.PI * lat1/180;
  var radlat2 = Math.PI * lat2/180;
  var radlon1 = Math.PI * lon1/180;
  var radlon2 = Math.PI * lon2/180;
  var theta = lon1-lon2;
  var radtheta = Math.PI * theta/180;
  var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
  dist = Math.acos(dist);
  dist = dist * 180/Math.PI;
  dist = dist * 60 * 1.1515;
  if (unit=="K") { dist = dist * 1.609344; }
  if (unit=="N") { dist = dist * 0.8684; }
  return dist;
}
});


}
google.maps.event.addDomListener(window, 'load', initialize);
</script>`

将wp_query与Google Maps搜索半径结合

0 个答案: