【发布时间】：2016-01-15 00:16:51
【问题描述】：
好的，我是 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" 的内容，以打印谷歌地图反向地理编码 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，但是两者都给了我“数组”或 div 类名的输出。
对于如何最好地达到我想要的结果有什么建议吗？最好在单击/鼠标上进行 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;
}
});
【问题讨论】：
标签： javascript php arrays google-maps