Question

我之前从未使用过Google Maps API，而且我也无法在网上发现任何类似的问题。我在这里做了一些非常基本的事，我只想在Google地图上添加OpenSeaMaps。

我已经在网上看到了几个代码示例，所以我使用下面的代码，我遇到map.mapTypes.insertAt is not a function的问题，但我查看了文档但这并没有似乎已被弃用，并且是Google Maps API的几个示例，例如https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay

有谁知道为什么会抛出这个错误？

  var map;

  function initMap() {

   map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: { lat: 35.1264, lng: 33.4299 },
            mapTypeIds: ['satellite', 'OSM']
   });


    var osmMapTypeOptions = {
            getTileUrl: function(coord, zoom) {
                return "http://t1.openseamap.org/seamark/" +
                    zoom + "/" + coord.x + "/" + coord.y + ".png";
            },
            tileSize: new google.maps.Size(256, 256),
            isPng: true,
            maxZoom: 19,
            minZoom: 0,
            name: "OSM"
     };


    var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);


    map.setMapTypeId('OSM');
    map.mapTypes.insertAt(0, osmMapType); 

  }

Answer 1

MapTypesRegistry没有.insertAt方法。见the documentation on MapTypes

我认为您需要OverlayMapType

确实有.insertAt方法，这对我有用（请注意从map.mapTypes.insertAt(0, osmMapType);到map.overlayMapTypes.insertAt(0,osmMapType);的更改：

var osmMapTypeOptions = {
  getTileUrl: function(coord, zoom) {
    return "http://t1.openseamap.org/seamark/" +
      zoom + "/" + coord.x + "/" + coord.y + ".png";
  },
  tileSize: new google.maps.Size(256, 256),
  isPng: true,
  maxZoom: 19,
  minZoom: 0,
  name: "OSM"
};

var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);

map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);

proof of concept fiddle

（在缩放级别小于10时似乎没有太多图像）

索引：145 Uncaught TypeError：map.mapTypes.insertAt不是函数

1 个答案: