我有一个网站：
- 加载谷歌地图
- 使用Google Places搜索正在使用的
$_GET方法在input字段中获取一些值 - 在
input字段中获取autofocus - 然后在页面加载时执行自动搜索
我可以从数据库数据中构建的链接的方案是：
example.com?local=52.6762,19.7582 (i.e. lat, lng).
下面的代码只适用于我在URL中不使用点号的情况。例如，如果我使用example.com?local=52,19，代码就会像我希望的那样工作。
但是有了像example.com?local=52.6,19.7这样的链接，它似乎在第3步停止了。
我认为错误可能在负责步骤4的代码的内部，即：
itemsloaded = google.maps.event.addDomListener(document.body, 'DOMNodeInserted', function(e) {
google.maps.event.trigger(input, 'keydown', {
keyCode: 13
})
});
也许你在项目中遇到过这个问题。请帮忙。
代码：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#mapindex {
height: 400px;
width: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=yourapikeyhere&libraries=places&types=(cities)"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Google Maps API -->
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(52.015460, 18.498087); // Map is centered here
var myOptions = {
zoom: 6,
center: myLatLng,
mapTypeId: 'hybrid',
clickableIcons: false
};
function inputFocus() {
document.getElementById("pac-input").focus();
}
map = new google.maps.Map(document.getElementById("mapindex"), myOptions);
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var image = 'http://www.instead.com.pl/target2.png';
markers.push(new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
// trigger tha autofocus function with timeout
google.maps.event.addListenerOnce(map, 'idle', function() {
// inputFocus();
setTimeout(inputFocus, 1000);
});
// force autosearch on page load
itemsloaded = google.maps.event.addDomListener(document.body, 'DOMNodeInserted', function(e) {
google.maps.event.trigger(input, 'keydown', {
keyCode: 13
})
});
}
</script>
<script>
function start() {
initialize();
}
window.onload = start;
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Enter location" onload="mouseEnter()" value="<?php if(isset ($_GET['local'])){ echo $_GET['local'];}?>" />
<div id="mapindex"></div>
</body>
</html>
这是您的代码的一个工作简化版本。
从mapidle事件触发焦点并按下输入字段就足够了。无需设置超时等
此外，在API URL中传递types=(cities)也是无效的。
所以，如果我这样调用这个页面：map.php?local=52.6762,19.7582，地图以这些坐标为中心，并显示一个标记。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#mapindex {
height: 400px;
width: 100%;
}
</style>
<!-- Google Maps API -->
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(52.015460, 18.498087); // Map is centered here
var myOptions = {
zoom: 6,
center: myLatLng,
mapTypeId: 'hybrid',
clickableIcons: false
};
map = new google.maps.Map(document.getElementById("mapindex"), myOptions);
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var image = 'http://www.instead.com.pl/target2.png';
markers.push(new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
// trigger tha autofocus function
google.maps.event.addListenerOnce(map, 'idle', function() {
input.focus();
google.maps.event.trigger(input, 'keydown', {
keyCode: 13
})
});
}
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Enter location" onload="mouseEnter()" value="<?php if (isset ($_GET['local'])) {
echo $_GET['local'];
} ?>" />
<div id="mapindex"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initialize" async defer></script>
</body>
</html>