echo或print_r数组到div的占位符

好的，我是PHP新手所以请原谅我 . 我知道在div占位符中包含另一个div并不常见，但我需要一些指导来解决此任务的最佳方法：

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

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

因此， class “位置”包括箭头的背景图像 . 我正在尝试从文本输入更改输入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类名的输出 .

关于如何最好地达到我想要的结果，有什么建议吗？是否最好继续使用CSS div类更改onClick / mouseOver来替换输入，而不是另一个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;
    }
});