Javascript &引用；未捕获类型错误：this.setValues不是函数；使用谷歌地图API v3

尝试修改示例并使用markerLabel类而不是google.maps.marker。 在此处搜索解决方案，但找不到任何内容

markerwithlabel

声明为

var marker=newmarkerwithlabel（{

我得到这个错误

Uncaught TypeError: this.setValues is not a function

请检查下面的代码。

我试图只包含与此问题相关的代码以及复制此问题所需的最少代码

 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
    };
}

var映射；
var位置=[]；
函数initialiseMap（）{
$.getJSON（“https://sheets.googleapis.com/v4/spreadsheets/1fBLlw8xlO_yhL8rYfFlQnzvKR-swEtE7NRX41ysARCk/values/Sheet1！A2:Q？key=AIzaSyD112yF6ORTtrx1-ugfhJLcx1VHDOla1Vs“，函数（数据）{
//data.values包含电子表格中的行数组。每行也是单元格值数组。
//修改下面的代码以适合电子表格的结构。
$（data.values）.each（函数（）{
变量位置={}；
location.title=此[2]；
location.latitude=parseFloat（此[15]）；
location.longitude=parseFloat（此[16]）；
位置。推（位置）；
});
//居中（0，0）。地图居中和缩放将在稍后重新配置（fitbounds方法）
变量映射选项={
缩放：10，
中心：新google.maps.LatLng（0,0）
};
var map=new google.maps.map（document.getElementById（'map'），mapOptions）；
设置位置（地图、位置）；
});
}
功能设置位置（地图、位置）{
var bounds=new google.maps.LatLngBounds（）；
//创建漂亮的自定义弹出框，以便在单击标记时显示
var infowindow=new google.maps.infowindow({
内容：“内容字符串”
});
对于（变量i=0；i

您在HTML端遇到了排序问题。当加载带有

标记的Javascript时，您应该使用

异步
或
延迟
，而不是两者都使用。在这种情况下，Google API应该在页面的Javascript之后加载，以便及时定义回调，
initialiseMap
，因此它应该具有de>defer
属性。但是，在加载V3
MarkerWithLabel
之前需要加载Google API，因此V3脚本也需要
defer
属性，并且需要跟随Google 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>

您在HTML端遇到了排序问题。当加载带有
标记的Javascript时，您应该使用
异步
或
延迟
，而不是两者都使用。在这种情况下，Google API应该在页面的Javascript之后加载，以便及时定义回调，
initialiseMap
，因此它应该具有de>defer
属性。但是，在加载V3
MarkerWithLabel
之前需要加载Google API，因此V3脚本也需要
defer
属性，并且需要跟随Google 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>


如何将
标记WithLabel
第三方库？@geocodezip包含在代码笔的html部分可能的重复项中？如何将
标记WithLabel
第三方库？@geocodezip包含在代码笔的html部分可能的重复项JSFIDLE和代码笔有一个javascript选项要在html之后加载的部分，所以我认为这不是问题所在？我尝试使用“延迟”问题依然存在，还有其他想法吗？再试一次。@Victor-------确保从Google脚本中删除
async
属性，它将导致Google脚本在请求完成时加载，而不是延迟。哇，好吧。Javascript肯定会让我觉得自己像个白痴。更好的错误描述会更好谢谢，JSFIDLE和codepen有一个选项，可以在html之后加载javascript部分，所以我认为这不是问题所在？我尝试使用“延迟”问题依然存在，还有其他想法吗？再试一次。@Victor-------确保从Google脚本中删除
async
属性，它将导致Google脚本在请求完成时加载，而不是延迟。哇，好吧。Javascript肯定会让我觉得自己像个白痴。更好的错误描述会更好谢谢你