0
私のフォームでは、オートコンプリート検索入力と地図ルートが一緒に機能していません。私は、スクリプト自動完成検索機能付き地図ルートを作成できません
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&key=*key*&libraries=places&callback=initAutocomplete"
>
</script>
と地図ルートに延期非同期追加するとき
オートコンプリートの検索が働いている私は、非同期これは私の完全なコード
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&key=AIzaSyBNHI4xFw5CzYJSvbotLPu93C81q69ZbZA&libraries=places&callback=initAutocomplete"
async defer>
</script>
</head>
<body>
<form method="post">
<div id="locationField">
<input id="autocomplete" name="txtpickup" placeholder="Enter your address"
onFocus="geolocate()" type="text" style="width:20em;"></input>
<br/>
<br/>
<input id="autocomplete1" name="txtdrop" placeholder="Enter your address"
onFocus="geolocate()" type="text" style="width:20em;"></input>
<br/>
<br/>
<input id="checkprice" type="submit" value="checkprice" name="checkprice" style="width:20em;"></input>
</div>
<form>
<?php
if (isset($_POST['checkprice']))
{
$pickupaddress = $_POST['txtpickup'];
$dropaddress = $_POST['txtdrop'];
$geo = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($pickupaddress).'&sensor=false');
$geo = json_decode($geo, true);
if ($geo['status'] == 'OK') {
$latitude = $geo['results'][0]['geometry']['location']['lat'];
$longitude = $geo['results'][0]['geometry']['location']['lng'];
}
//------- drop coordnates -----------
$geo1 = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($dropaddress).'&sensor=false');
$geo1 = json_decode($geo1, true);
if ($geo1['status'] == 'OK') {
$latitude1 = $geo1['results'][0]['geometry']['location']['lat'];
$longitude1 = $geo1['results'][0]['geometry']['location']['lng'];
}
echo '<div><input id="anything" type="button" value="Show Route" onClick="updatePos(\''.str_replace("'", "\\'", $latitude).'\', \''.str_replace("'", "\\'", $longitude).'\', \''.str_replace("'", "\\'", $latitude1).'\', \''.str_replace("'", "\\'", $longitude1).'\');" ></div>';
}
// -------- distance -------------
function distance($lat1, $lon1, $lat2, $lon2, $unit) {
$theta = $lon1 - $lon2;
$dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta));
$dist = acos($dist);
$dist = rad2deg($dist);
$miles = $dist * 60 * 1.1515;
$unit = strtoupper($unit);
if ($unit == "K") {
return ($miles * 1.609344);
} else if ($unit == "N") {
return ($miles * 0.8684);
} else {
return $miles;
}
}
?>
<div id="map_canvas" style="float:left;width:70%;height:400px;"></div>
<ul></ul>
<p id="pMsg"></p>
</body>
<script type="text/javascript">
function updatePos(latitude,longitude,latitude1,longitude1){
ginit(latitude,longitude,latitude1,longitude1);
}
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{types: ['geocode']});
autocomplete1 = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete1')),
{types: ['geocode']});
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
var directions = {};
var bounds = new google.maps.LatLngBounds();
function ginit(latitude,longitude,latitude1,longitude1) {
var opts = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(52.524268, 13.406290000000013)
}
map = new google.maps.Map(document.getElementById("map_canvas"), opts);
var routes = [{
label: 'Erkner',
request: {
origin: new google.maps.LatLng(latitude, longitude),
destination: new google.maps.LatLng(latitude1, longitude1),
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
rendering: {
marker: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
draggable: true
}
}
];
var dists = [10000, 5000, 3000, 1000];
var selects = document.createElement('select');
list = document.getElementsByTagName('ul')[0];
for (var d = 0; d < dists.length; ++d) {
selects.options[selects.options.length] = new Option(dists[d], dists[d], d == 0, d == 0);
}
for (var r = 0; r < routes.length; ++r) {
bounds.extend(routes[r].request.destination);
bounds.extend(routes[r].request.origin);
routes[r].rendering.routeId = 'r' + r + new Date().getTime();
routes[r].rendering.dist = dists[0];
var select = selects.cloneNode(true);
select.setAttribute('name', routes[r].rendering.routeId);
select.onchange = function() {
directions[this.name].renderer.dist = this.value;
setMarkers(this.name)
};
list.appendChild(document.createElement('li'));
list.lastChild.appendChild(select);
list.lastChild.appendChild(document.createTextNode(routes[r].label));
requestRoute(routes[r], map);
}
map.fitBounds(bounds);
}
function setMarkers(ID) {
var direction = directions[ID],
renderer = direction.renderer,
dist = renderer.dist,
marker = renderer.marker,
map = renderer.getMap(),
dirs = direction.renderer.getDirections();
marker.map = map;
for (var k in direction.sets) {
var set = directions[ID].sets[k];
set.visible = !! (k === dist);
for (var m = 0; m < set.length; ++m) {
set[m].setMap((set.visible) ? map : null);
}
}
if (!direction.sets[dist]) {
if (dirs.routes.length) {
var route = dirs.routes[0];
var az = 0;
for (var i = 0; i < route.legs.length; ++i) {
if (route.legs[i].distance) {
az += route.legs[i].distance.value;
}
}
dist = Math.max(dist, Math.round(az/100));
direction.sets[dist] = gMilestone(route, dist, marker);
}
}
}
function requestRoute(route, map) {
if (!window.gDirSVC) {
window.gDirSVC = new google.maps.DirectionsService();
}
var renderer = new google.maps.DirectionsRenderer(route.rendering);
var renderer = new google.maps.DirectionsRenderer(route.rendering);
renderer.setMap(map);
renderer.setOptions({
preserveViewport: true
})
google.maps.event.addListener(renderer, 'directions_changed', function() {
if (directions[this.routeId]) {
//remove markers
for (var k in directions[this.routeId].sets) {
for (var m = 0; m < directions[this.routeId].sets[k].length; ++m) {
directions[this.routeId].sets[k][m].setMap(null);
}
}
}
directions[this.routeId] = {
renderer: this,
sets: {}
};
setMarkers(this.routeId);
});
window.gDirSVC.route(route.request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderer.setDirections(response);
}
});
}
function gMilestone(route, dist, opts) {
var markers = [],
geo = google.maps.geometry.spherical,
path = route.overview_path,
point = path[0],
distance = 0,
leg,
overflow,
pos;
for (var p = 1; p < path.length; ++p) {
leg = Math.round(geo.computeDistanceBetween(point, path[p]));
d1 = distance + 0
distance += leg;
overflow = dist - (d1 % dist);
if (distance >= dist && leg >= overflow) {
if (overflow && leg >= overflow) {
pos = geo.computeOffset(point, overflow, geo.computeHeading(point, path[p]));
opts.position = pos;
markers.push(new google.maps.Marker(opts));
distance -= dist;
}
while (distance >= dist) {
pos = geo.computeOffset(point, dist + overflow, geo.computeHeading(point, path[p]));
opts.position = pos;
markers.push(new google.maps.Marker(opts));
distance -= dist;
}
}
point = path[p]
}
console.log(markers); //alert(markers);
for (var key in markers) {
var obj = markers[key];
console.log(obj);
if (markers[key].hasOwnProperty("position")) {
document.getElementById("pMsg").innerHTML += key+":"+markers[key].getPosition().toUrlValue(6) +"<br>";
}
}
return markers;
}
</script>
</html>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&key=AIzaSyBNHI4xFw5CzYJSvbotLPu93C81q69ZbZA&libraries=places&callback=initAutocomplete"
async defer>
</script>
を延期削除したときに取り組んでいます
助けをいただければ幸いです
いくつかのコードスニペットを教えてください。 –
http://stackoverflow.com/questions/22033329/defer-attribute-doesnt-work-with-google-maps-api多分これはあなたを助けることができます。 –
それはすでにそれが助けてくれません –