Question

单击按钮后，将调用AJAX响应以根据搜索查询输出JSON。我想使用AJAX响应中的变量all_locations输出到Google地图标记。不太确定如何做到这一点。我研究过使用async作为假，但没有成功。

表格

<form id="filter">
    <span class="ek-search-address col-xs-8">
      <label for="address">Location</label>
      <input id="address" name="property_location" value="New York" placeholder="Input Address" type="text"/>
    </span>

    <span class="ek-search-radius live-search col-xs">
     <select id="radius_km">
         <option value=1>1km</option>
         <option value=2>2km</option>
         <option value=5>5km</option>
         <option value=30>30km</option>
     </select>
    </span>
    <button onClick="showCloseLocations()">Search</button>
    <input type="hidden" name="action" value="ek_search">
</form>

<div id="map_canvas">

AJAX致电

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $('#filter');
        var ajaxurl = '<?php echo admin_url("admin-ajax.php", null); ?>';
        data = { action: "ek_search"};
        var all_locations = $.ajax({
            url: ajaxurl,
            data:data,
            async:false,
            type: 'POST', // POST
            dataType: 'json',
            success: function(response) {
            console.log(response);  
            }
        });
        return false;
    });
});

map.js

jQuery(function($) {
var map = null;
var radius_circle;
var markers_on_map = [];
var geocoder;
var infowindow;


new google.maps.places.Autocomplete(
    (document.getElementById('address')), {
        types: ['geocode']
    });

//initialize map on document ready
$(document).ready(function() {
    var latlng = new google.maps.LatLng(50.927978, -5.408908);
    var myOptions = {
        zoom: 17,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    google.maps.event.addListener(map, 'click', function() {
        if (infowindow) {
            infowindow.setMap(null);
            infowindow = null;
        }
    });
});

function showCloseLocations() {
    var i;
    var radius_km = $('#radius_km').val();
    var address = $('#address').val();

    //remove all radii and markers from map before displaying new ones
    if (radius_circle) {
        radius_circle.setMap(null);
        radius_circle = null;
    }
    for (i = 0; i < markers_on_map.length; i++) {
        if (markers_on_map[i]) {
            markers_on_map[i].setMap(null);
            markers_on_map[i] = null;
        }
    }

    if (geocoder) {
        geocoder.geocode({
            'address': address
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                    var address_lat_lng = results[0].geometry.location;
                    radius_circle = new google.maps.Circle({
                        center: address_lat_lng,
                        radius: radius_km * 1000,
                        clickable: false,
                        map: map
                    });
                    if (radius_circle) map.fitBounds(radius_circle.getBounds());
                    for (var j = 0; j < all_locations.length; j++) {
                        (function(location) {
                            var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
                            var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker
                            if (distance_from_location <= radius_km * 1000) {
                                var new_marker = new google.maps.Marker({
                                    position: marker_lat_lng,
                                    map: map,
                                    title: location.name
                                });
                                google.maps.event.addListener(new_marker, 'click', function() {
                                    if (infowindow) {
                                        infowindow.setMap(null);
                                        infowindow = null;
                                    }
                                    infowindow = new google.maps.InfoWindow({
                                        content: '<div style="color:red">' + location.name + '</div>' + " is " + distance_from_location + " meters from my location",
                                        size: new google.maps.Size(150, 50),
                                        pixelOffset: new google.maps.Size(0, -30),
                                        position: marker_lat_lng,
                                        map: map
                                    });
                                });
                                markers_on_map.push(new_marker);
                            }
                        })(all_locations[j]);
                    }
                } else {
                    alert("No results found while geocoding!");
                }
            } else {
                alert("Geocode was not successful: " + status);
            }
        });
    }
}

}）;

Answer 1

Ajax是一个异步过程，因此您需要将所有位置作为参数发送到成功回调函数

中

试试这个：

<强>的Ajax：

jQuery(function($){
    $('#filter').submit(function(e){
        e.preventDefault();//preventing form to submit with page reload
        var filter = $('#filter');
        var ajaxurl = '<?php echo admin_url("admin-ajax.php", null); ?>';
        data = { action: "ek_search"};
        $.ajax({
            url: ajaxurl,
            data:data,
            async:false,
            type: 'POST', // POST
            dataType: 'json',
            success: function(response) {
                console.log(response);  
                showCloseLocations(response.all_locations);
            }
        });
        return false;
    });
});

更新功能showCloseLocations以接受all_locations作为参数

function showCloseLocations(all_locations) {
    //show location function code here
}

问题：我想知道您如何使用#filter提交表单？因为html中没有提交类型按钮，请务必将搜索按钮的类型更改为submit而不是button，以便第一个表单可以通过搜索输入提交以获取所有位置

<button type="submit">Search</button>

使用JSON向Google Maps位置标记发送AJAX响应

1 个答案: