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>

所以，班级位置＆＃39;包括箭头的背景图像。我正在尝试更改输入id =＆＃34; Destination＆＃34;的内容。从文本输入，到打印谷歌地图反向地理编码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，但两者都给了我一个＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;或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;
    }
});

Answer 1

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

使用循环，如for，foreach等。
使用implode（）函数将数组键与一些“glue”echo implode(",", $fullAddress)
使用数组访问权限，例如echo $fullAddress['city'];

Answer 2

试试这个

<?php
$fulladdress = "Some address";
echo "<div class='r-street-address'><input id='Destination' tabindex='1' class='location txt_box' type='text' placeholder='$fullAddress'/></div>";

?>

Answer 3

试试这个

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

编辑占位符：

placeholder="<?php echo $fullAddress; ?>"

Answer 4

最终阵列不是必需的。 1个简单的js系列完成了工作：

RotateTransform3D myRotate = new RotateTransform3D(new AxisAngleRotation3D(new Vector3D(0, 0, 1), Convert.ToDouble(180)), new Point3D(0, 0, 0));
TranslateTransform3D myTranslate = new TranslateTransform3D(0, 0, 100);
ModelVisual3D device3D2 = new ModelVisual3D();
device3D2.Content = Display3d(MODEL_PATH2);
device3D2.Transform = myRotate;
device3D2.Transform = myTranslate;
viewPort3d.Children.Add(device3D2);

echo或print_r数组到div的占位符

4 个答案: