javascript - “未捕获的 TypeError:this.setValues 不是函数”使用 Google Maps API v3
问题描述
尝试修改示例并使用 markerLabel 类而不是 google.maps.marker。在这里搜索解决方案,但找不到任何东西。
被markerwithlabel
声明为var marker = new MarkerWithLabel({
我收到这个错误
Uncaught TypeError: this.setValues is not a function
请检查下面的codepen。 https://codepen.io/anon/pen/LgOzRO
我试图仅包含与此问题相关的代码以及重现此问题所需的最少代码。
var map;
var locations = [];
function initialiseMap() {
$.getJSON("https://sheets.googleapis.com/v4/spreadsheets/1fBLlw8xlO_yhL8rYfFlQnzvKR-swEtE7NRX41ysARCk/values/Sheet1!A2:Q?key=AIzaSyD112yF6ORTtrx1-ugfhJLcx1VHDOla1Vs", function(data) {
// data.values contains the array of rows from the spreadsheet. Each row is also an array of cell values.
// Modify the code below to suit the structure of your spreadsheet.
$(data.values).each(function() {
var location = {};
location.title = this[2];
location.latitude = parseFloat(this[15]);
location.longitude = parseFloat(this[16]);
locations.push(location);
});
// Center on (0, 0). Map center and zoom will reconfigure later (fitbounds method)
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(0, 0)
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
setLocations(map, locations);
});
}
function setLocations(map, locations) {
var bounds = new google.maps.LatLngBounds();
// Create nice, customised pop-up boxes, to appear when the marker is clicked on
var infowindow = new google.maps.InfoWindow({
content: "Content String"
});
for (var i = 0; i < locations.length; i++) {
var new_marker = createMarker(map, locations[i], infowindow);
bounds.extend(new_marker.position);
}
map.fitBounds(bounds);
}
function createMarker(map, location, infowindow) {
// Modify the code below to suit the structure of your spreadsheet (stored in variable 'location')
var position = {
lat: parseFloat(location.latitude),
lng: parseFloat(location.longitude)
};
var marker = new MarkerWithLabel({
position: position,
map: map,
title: location.title,
labelClass: "labels", // the CSS class for the label
labelInBackground: false,
icon: pinSymbol('red')
});
google.maps.event.addListener(marker, 'click', function() {
});
return marker;
}
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 2
};
}
解决方案
您在 HTML 方面遇到了排序问题。加载带有<script>
标签的 Javascript 时,您应该使用async
or defer
,而不是同时使用。在这种情况下,Google API 应该在页面的 Javascript之后initialiseMap
加载,以便及时定义回调,,因此它应该具有defer
属性。但是谷歌API需要在加载V3之前MarkerWithLabel
加载,所以V3脚本也需要该defer
属性,需要跟在谷歌API脚本之后。
所以你的 HTML 应该是
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD112yF6ORTtrx1-ugfhJLcx1VHDOla1Vs&callback=initialiseMap"></script>
<script defer src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
推荐阅读
- kubernetes - 如何在 Ansible 中检索已创建的 Google Kubernetes (GKE) 集群的凭据?
- javascript - 如何使用 Jest 测试 JS 函数?
- swift - 另一个 UIMenuController 不会显示问题
- python - 在 Keras 中使用共享层恢复多个模型
- javascript - 我的 JavaScript 仅适用于某些页面,我认为它可能加载得太早
- ruby - 用Ruby解压PDF文件
- c - 为什么 GCC 不在这个求和循环中优化掉内存写入?
- spring - CDI与Spring携手并进
- php - 将 Symfony 的依赖注入(自动装配)集成到遗留应用程序中
- android - 将数据插入到 firebase -Android - 并检查特定属性