我试图在同一个页面中包含两个不同的Google,但是我得到了一个错误
您已经多次在此页面中包含Google。
具体来说,我试图使用自动完成和距离矩阵API从谷歌。我只能让一个或另一个在任何一个页面上工作,因为我不能两次调用maps.googleapis.com
。但是,我必须调用链接的不同扩展(即callback=initAutocomplete
和callback=initMap
),因此我不知道如何绕过它。这两个链接如下:
<script src="https://maps.googleapis.com/maps/api/js?key=MyPrivateKey=&libraries=places&callback=initAutocomplete" async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyPrivateKey4&callback=initMap" async defer></script>
有人知道如何使用单个脚本调用来访问autocomplete和Map吗?谢谢!
发布于 2017-01-02 10:02:11
通常,当Google (根据请求加载所有库)完全加载并可以使用时,会调用callback
函数。因此,您可以将initAutoComplete
放在initMap
中,例如
<script>
var map;
function initMap(){
// initiate a new map instance.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 15.3647, lng: 75.1240}
});
initAutocomplete(); // initiate Auto complete instance
}
fucntion initAutocomplete(){
// code to handle autocomplete
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<key>&libraries=places&callback=initMap" async defer></script>
发布于 2021-02-04 15:28:40
用于聚焦函数并替换mapinit函数中的输入值
function country() {
mapInp = document.getElementById("country");
initMap(mapInp)`enter code here`;
}
// feedback form city search
function city() {
mapInp = document.getElementById("showcity");
initMap(mapInp);
};
// main map called in both city and country
function initMap(mapInp) {
var country;
const map = new google.maps.Map(document.getElementById("map3"), {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13,
});
const input = mapInp;
// var autocomplete = new google.maps.places.Autocomplete(input, options);
const card = document.getElementById("pac-card");
// Zconst input = document.getElementById("showcity");
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
const autocomplete = new google.maps.places.Autocomplete(input);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo("bounds", map);
// Set the data fields to return when the user selects a place.
autocomplete.setFields([
"address_components",
"geometry",
"icon",
"name",
]);
const infowindow = new google.maps.InfoWindow();
const infowindowContent = document.getElementById("infowindow-content");
infowindow.setContent(infowindowContent);
const marker = new google.maps.Marker({
map,
anchorPoint: new google.maps.Point(0, -29),
});
autocomplete.addListener("place_changed", () => {
infowindow.close();
marker.setVisible(false);
const place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert(
"No details available for input: '" + place.name + "'"
);
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
}
https://stackoverflow.com/questions/41424509
复制相似问题