1

我还没有在任何地方看到这个关于雄蕊瓷砖的问题。我正在尝试将两张地图加载到一个页面上，一张使用雄蕊图块，另一张使用“常规”谷歌地图图块。我过去使用过 Stamen，没有任何问题，但在这里我不确定发生了什么。

控制台给了我错误Uncaught TypeError: google.maps.StamenMapType is not a function。我希望它能够工作，因为我在其他地方有以下代码工作：

var layer = "toner-lite";
var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(39.290385, -76.612189),
    zoom: 10,
    mapTypeId: layer,
    mapTypeControlOptions: {
        mapTypeIds: [layer, google.maps.MapTypeId.HYBRID]
    }
});

为什么会google.maps.StamenMapType在别处得到认可，而在这里却没有？

我究竟做错了什么？

var map1;
var map2;
var mapProp;


function initMap() {
  var layer = "toner";
  map = new google.maps.Map(document.getElementById('mapOne'), {
    center: new google.maps.LatLng(37.7, -122.4),
    zoom: 12,
    mapTypeId: layer,
    mapTypeControlOptions: {
      mapTypeIds: [layer]
    }
  });
  map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
};

var newMap;
var newMapProp;

function newInitMap() {
  newMapProp = {
    center: new google.maps.LatLng(37, -77),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROAD
  };
  newMap = new google.maps.Map(document.getElementById('mapTwo'), newMapProp);
}

$(document).ready(function() {
  newInitMap();
  initMap();
})
#content {
  width: 80%;
  margin: 0 auto;
}
.map {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 10px;
}
#right {
  float: right;
}
#left {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkVd6hg93FK8s6RAS0DjEgKdR_gaR2UXs"></script>

<div id="content">
  <div id="left">
    <div id="mapOne" class="map"></div>
  </div>
  <div id="right">
    <div id="mapTwo" class="map"></div>
  </div>
</div>

4

1 回答 1

2

Stamen 库依赖于 Google Maps Javascript API v3，之后您必须包含它。

改变：

<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkVd6hg93FK8s6RAS0DjEgKdR_gaR2UXs"></script>

到：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkVd6hg93FK8s6RAS0DjEgKdR_gaR2UXs"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>

工作代码片段：

var map1;
var map2;
var mapProp;


function initMap() {
  var layer = "toner";
  map = new google.maps.Map(document.getElementById('mapOne'), {
    center: new google.maps.LatLng(37.7, -122.4),
    zoom: 12,
    mapTypeId: layer,
    mapTypeControlOptions: {
      mapTypeIds: [layer]
    }
  });
  map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
};

var newMap;
var newMapProp;

function newInitMap() {
  newMapProp = {
    center: new google.maps.LatLng(37, -77),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROAD
  };
  newMap = new google.maps.Map(document.getElementById('mapTwo'), newMapProp);
}

$(document).ready(function() {
  newInitMap();
  initMap();
})
#content {
  width: 80%;
  margin: 0 auto;
}
.map {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 10px;
}
#right {
  float: right;
}
#left {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>

<div id="content">
  <div id="left">
    <div id="mapOne" class="map"></div>
  </div>
  <div id="right">
    <div id="mapTwo" class="map"></div>
  </div>
</div>

于 2015-12-04T02:14:56.157 回答