javascript - echo 或 print_r 数组到 div 的占位符中

Question

好吧，我是 PHP 新手，请原谅我。我知道在 div 占位符中包含另一个 div 并不常见，但我需要一些有关完成此任务的最佳方法的指导:

我有一个输入文本字段，其目的是让用户输入他们的地址，目前也使用谷歌地图自动完成 API。

        <div class="r-street-address"><input id="Destination" tabindex="1" class="location txt_box" type="text" placeholder="Street Address, City, State"/></div>

因此，“位置”类包含箭头的背景图像。我正在尝试更改文本输入中的输入 id="Destination"的内容，以打印 google map 反向地理编码 api 的结果。

例如:

 <div id="address2">Loading...</div><div id="city"></div>

这些 DIVS 以格式化地址输出位置。

这里我设置了一个数组:

<?php 
`$fullAddress = array(
"address2" => $_POST["address2"],
'city' => $_POST["city"]);
echo $fullAddress;
?>

我尝试将数组结果作为占位符/值包含在输入字段中，如下所示:

<div class="r-street-address"><input id="Destination" tabindex="1" class="location txt_box" type="text" placeholder="<?php print_r($fullAddress);"/></div>

我也尝试过使用 echo，但是两者都给出了“array”或 div 类名的输出。

对于如何最好地实现我想要的结果有什么建议吗？最好在 Click/mouseOver 上进行 CSS div 类更改，将输入替换为另一个格式化为包含格式化地址的 div。

如有任何建议，我们将不胜感激。

我还将附加一些我一直在尝试以获得所需效果的 JSfiddles 的链接。

http://jsfiddle.net/ByLGs/ https://jsfiddle.net/e7fmcu3q/

这是我用于反向地理编码的 JavaScript:

<script>
// set of locations represented by lat/lon pairs
var locations = [{
    lat: 43.73358,
    lon: -79.345334,
    place: "shops at don mills"
}, {
    lat: 43.424656,
    lon: -80.439038,
    place: "fairview park"
}, {
    lat: 43.777878,
    lon: -79.344654,
    place: "fairview mall"
}, {
    lat: 43.21735,
    lon: -79.86192,
    place: "lime ridge"
}, {
    lat: 43.8682046,
    lon: -79.2883119,
    place: "markville shopping centre"
}, {
    lat: 43.0260982,
    lon: -81.279526,
    place: "masonville place"
}, {
    lat: 43.806133,
    lon: -79.452095,
    place: "the promenade"
}, {
    lat: 45.4251736,
    lon: -75.6910829,
    place: "rideau centre"
}, {
    lat: 43.6104771,
    lon: -79.5605042,
    place: "sherway gardens"
}, {
    lat: 43.6536106,
    lon: -79.3800603,
    place: "toronto eaton centre"
}, {
    lat: 45.602224,
    lon: -73.564496,
    place: "galeries d anjou"
}, {
    lat: 45.464042,
    lon: -73.831361,
    place: "fairview pointe claire"
}, {
    lat: 45.5702429,
    lon: -73.7460388,
    place: "carrefour laval"
}, {
    lat: 45.5053826,
    lon: -73.3780708,
    place: "promenades st bruno"
}, {
    lat: 50.998577,
    lon: -114.074198,
    place: "chinook centre"
}, {
    lat: 51.0865228,
    lon: -114.1559935,
    place: "market mall"
}, {
    lat: 49.2828884,
    lon: -123.1182066,
    place: "pacific centre"
}, {
    lat: 49.1666477,
    lon: -123.135327,
    place: "richmond centre"
}, {
    lat: 46.0984068,
    lon: -64.7582975,
    place: "champlain place"
}, {
    lat: 49.881501,
    lon: -97.199779,
    place: "polo park"
}];

var geocoder;


function codeLatLng(lat, lng) {

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({
        'latLng': latlng
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            console.log(results);
            console.log(results[1]);
            console.log(results[0].formatted_address);

            if (results[0]) {

                //formatted address
                $("#address2").html(results[0].formatted_address)
                    //find country name
                for (var i = 0; i < results[0].address_components.length; i++) {
                    for (var b = 0; b < results[0].address_components[i].types.length; b++) {

                        //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                        if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                            //this is the object you are looking for
                            city = results[0].address_components[i];
                            break;
                        }
                    }
                }
                //city data
                $("#city").html(city.short_name + " : " + city.long_name);


            } else {
                $("#address2").html("No results found");
            }
        } else {
            $("#address2").html("Geocoder failed due to: " + status);
        }
    });
}




function displayMalls() {
    var html = "";
    $.each(locations, function(k, v) {

        html += "<a href='https://maps.googleapis.com/maps/api/geocode/json?latlng=" + v.lat + "&long=" + v.lon + "'>" + v.place + "</a><br>";
    });

    $("#malls").html(html);

}

$(function() {


    // displayMalls();

    geocoder = new google.maps.Geocoder();


    // HTML5/W3C Geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(UserLocation, errorCallback, {
            maximumAge: 6000,
            timeout: 6000
        });
    } else {
        $("#latlong").html("GEO NOT AVAILABLE");
    }


    function errorCallback(error) {
        $("#latlong").html("GEO NOT AVAILABLE");
    }

    // Callback function for asynchronous call to HTML5 geolocation
    function UserLocation(position) {

        $("#latlong").html("Lat: " + position.coords.latitude + " <br>Long: " + position.coords.longitude);
        ClosestLocation(position.coords.latitude, position.coords.longitude, "This is my Location");

        codeLatLng(position.coords.latitude, position.coords.longitude);

    }

    // Display a map centered at the nearest location with a marker and InfoWindow.
    function ClosestLocation(lat, lon, title) {
        // Create a Google coordinate object for where to center the map
        var latlng = new google.maps.LatLng(lat, lon);

        // find the closest location to the user's location
        var closest = 0;
        var mindist = 99999;

        for (var i = 0; i < locations.length; i++) {
            // get the distance between user's location and this point
            var dist = Haversine(locations[i].lat, locations[i].lon, lat, lon);

            // check if this is the shortest distance so far
            if (dist < mindist) {
                closest = i;
                mindist = dist;
            }
        }

        // Create a Google coordinate object for the closest location
        var latlng = new google.maps.LatLng(locations[closest].lat, locations[closest].lon);

        var contentString = locations[closest].place +
            " <br>@" + Math.round(mindist * 10) / 10 + "kms";

        $("#result").html(contentString);


    }

    // Convert Degress to Radians
    function Deg2Rad(deg) {
        return deg * Math.PI / 180;
    }

    // Get Distance between two lat/lng points using the Haversine function
    // First published by Roger Sinnott in Sky & Telescope magazine in 1984 (“Virtues of the Haversine”)
    //
    function Haversine(lat1, lon1, lat2, lon2) {
        var R = 6372.8; // Earth Radius in Kilometers

        var dLat = Deg2Rad(lat2 - lat1);
        var dLon = Deg2Rad(lon2 - lon1);

        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(Deg2Rad(lat1)) * Math.cos(Deg2Rad(lat2)) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        var d = R * c;

        // Return Distance in Kilometers
        return d;
    }
});

Answer 1

这是一个非常基本的问题。 echo 为您提供数组，因为您想要回显的变量是数组。如果你想打印数组，那么你可以做几件事。

1. 使用 for、foreach 等循环。
2. 使用 implode() 函数将数组键与一些“粘合剂”连接起来 echo implode(",", $fullAddress)
3. 使用数组访问，例如 echo $fullAddress['city'];