Google Maps JavaScript API v3无法正常工作 [英] Google Maps JavaScript API v3 to not work correctly
问题描述
当我尝试对我的Qualtrics调查实施Google Maps时，我从控制台收到以下错误消息. API密钥正常运行:
I get the below error message from the console when I try to implement Google Maps to my Qualtrics survey. API Key works properly:
该站点使用不实现的实现覆盖Array.from() 支持可迭代项，这可能会导致Google Maps JavaScript API v3 无法正常工作."
"This site overrides Array.from() with an implementation that doesn't support iterables, which could cause Google Maps JavaScript API v3 to not work correctly."
这是我的代码(忽略我的API密钥):
AND this is my code (ignore my API key):
我没有使用任何数组，所以我不确定问题出在哪里...
I am not using any array, so I am not sure where the problem is coming from...
/*
* Qualtrics Google Map Lat/Long Collector
* Version 1.4
*
* Written by George Walker <george@georgewwalker.com>
* Get the latest from GitHub: https://github.com/pkmnct/qualtrics-google-map-lat-long/releases
*
* This JavaScript allows a Qualtrics user to collect a lat/long from a
* Google Map in a survey. To use it, create a new "Text Entry" question,
* then add this JavaScript to the question. You can set variables below.
* These include the lattitude and longitude to center the map at, the
* zoom level of the map, and the text to display when hovering over the
* map's pin. It also includes the width and height of the map.
*/
// Enter your Google Map API key in this variable:
var googleMapAPIKey = "MyKey";
Qualtrics.SurveyEngine.addOnload(function() {
// --- User Variables, set these: ---
var mapCenterLat = 39.1836;
var mapCenterLng = -96.5717;
var mapZoom = 16; // See https://developers.google.com/maps/documentation/javascript/tutorial#zoom-levels for help.
var pinTitle = "Move pin to correct location"; // This is displayed when hovering over the pin on the map.
var mapWidth = "100%";
var mapHeight = "300px";
var locationInputWidth = "96%";
var locationInputMargin = "2%";
var locationInputPadding = "15px";
var enableAutocompleteField = true;
var invalidLocationAlertText = "Please choose a location from the search dropdown. If your location doesn't appear in the search, enter a nearby location and move the pin to the correct location.";
// --- End of User Variables ---
// Get the data entry box and store it in a variable
var dataBox = document.getElementById("QR~" + this.questionId);
// Get the question container and store it in a variable.
var questionContainer = this.getQuestionContainer();
// Need to be able to access the marker to update it later.
var marker;
if (enableAutocompleteField) {
// Create a search box
try {
var locationInput = document.createElement('input');
locationInput.setAttribute("id", this.questionId + "-locationInput");
locationInput.style.width = locationInputWidth;
locationInput.style.margin = locationInputMargin;
locationInput.style.padding = locationInputPadding;
questionContainer.appendChild(locationInput);
var locationInputID = this.questionId + "-locationInput";
} catch (err) {
console.log("Unable to create places autocomplete field. Details: " + err);
alert("An error occurred creating the input field.");
}
}
try {
// Create a map object and append it to the question container.
var mapObject = document.createElement('div');
mapObject.setAttribute("id", this.questionId + "-map");
mapObject.style.width = mapWidth;
mapObject.style.height = mapHeight;
questionContainer.appendChild(mapObject);
var mapID = this.questionId + "-map";
} catch (err) {
console.log("Unable to create map object. Details: " + err);
alert("An error occurred creating the map.");
}
// Hide the data box
try {
dataBox.style.display = 'none';
} catch (err) {
console.log("Unable to hide data box.");
}
// This function calls itself once per second until the Google Maps API is loaded, then it displays the map.
function displayMap() {
try {
if (enableAutocompleteField) {
var locationAutocomplete = new google.maps.places.Autocomplete(locationInput);
// Whenever the inputs change, set the locationLatLong
google.maps.event.addListener(locationAutocomplete, 'place_changed', function() {
var place = locationAutocomplete.getPlace();
if (!place.geometry) {
alert(invalidLocationAlertText);
} else {
var locationLatLong = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
marker.setPosition(locationLatLong);
map.panTo(locationLatLong);
dataBox.value = '{"lat": "' + place.geometry.location.lat() + '", "long": "' + place.geometry.location.lng() + '"}';
}
});
}
var map = new google.maps.Map(document.getElementById(mapID), {
center: {
lat: mapCenterLat,
lng: mapCenterLng
},
zoom: mapZoom
});
// Create a new marker in the center of the map.
marker = new google.maps.Marker({
draggable: true,
position: {
lat: mapCenterLat,
lng: mapCenterLng
},
map: map,
title: pinTitle
});
// When the pin is clicked, store the lat/lng
google.maps.event.addListener(marker, 'click', function(event) {
dataBox.value = '{"lat": "' + this.getPosition().lat() + '", "long": "' + this.getPosition().lng() + '"}';
});
// When the pin is dragged, store the lat/lng where it ends
google.maps.event.addListener(marker, 'dragend', function(event) {
dataBox.value = '{"lat": "' + this.getPosition().lat() + '", "long": "' + this.getPosition().lng() + '"}';
});
} catch (err) {
setTimeout(displayMap, 1000);
}
}
displayMap();
});
// Load the Google Maps API if it is not already loaded.
try {
if (typeof googleMapJS == 'undefined') {
var googleMapJS;
if (googleMapJS == null) {
googleMapJS = document.createElement('script');
if (googleMapAPIKey == "MyKey" || googleMapAPIKey == null) {
googleMapJS.src = 'https://maps.googleapis.com/maps/api/js?key=MyKey';
} else {
googleMapJS.src = 'https://maps.googleapis.com/maps/api/js?key=MyKey';
//googleMapJS.src = 'https://maps.googleapis.com/maps/api/js?key=' + googleMapAPIKey;
}
document.head.appendChild(googleMapJS);
}
} else {
console.log("Map already loaded.");
}
} catch (err) {
console.log("Unable to load Google Maps API. Details: " + err);
alert("Unable to load Google Maps API.");
}
推荐答案
A similar issue has been reported in our Public Issue Tracker and already been addressed by our Engineering team. As per latest comment:
我们刚刚提交了一个更新.现在检查更多 明确的，将涵盖您的用例:Array.from(new Set([42]))[0] ！== 42 ...警告
We've just submitted an update for this. The check is now more explicit and will cover your use case: Array.from(new Set([42]))[0] !== 42 ... warn
这将在即将发布的每周发行版本中提供
This will be available in an upcoming weekly release
公共问题跟踪器是Google内部用于在产品开发过程中跟踪错误和功能请求的工具.它可以在Google外部使用，供需要在特定项目上与Google团队合作的外部公共和合作伙伴用户使用.您可以在此处了解更多信息 https://developers.google.com/issue-tracker/
Public Issue Tracker is a tool used internally at Google to track bugs and feature requests during product development. It is available outside of Google for use by external public and partner users who need to collaborate with Google teams on specific projects. You can learn more here https://developers.google.com/issue-tracker/.
这篇关于Google Maps JavaScript API v3无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
