Question

我正在使用google maps api这个奇怪的问题。

我正在尝试显示带有可点击引脚的地图，其中数据是从api加载的。一切似乎都有效：数据加载，引脚出现，切换工作......但地图只是灰色 - 没有加载地图图像。它的可拖动，标记也是从谷歌加载，但不是地图图像。

这可能是什么原因？

＆＃13;

<template is="dom-bind">
  <template is="dom-repeat" items="{{users}}">
    <a href="{{makeUrl('user-info', item)}}">{{item.name}}</a>
  </template>
</template>

<script>
  var template = document.querySelector('template');
  template.makeUrl = function(route, user) {
    return MoreRouting.urlFor(route, {name:user.name});
  };
</script>

＆＃13;

我怀疑地图设置不会到达 marker = new google.maps.Marker ，即使它们是全球性的......

有什么想法吗？

Answer 1

您还必须为地图注册自定义mapType。

将此行放在创建google.map.Map - 实例的行之后：

gmap.mapTypes.set('Styled', styledMapType);

但是，当您只希望地图以单一样式显示时，您不需要创建自定义mapType，您可以将样式直接应用于默认的mapType（ROADMAP）。

以下将有相同的结果：

function initialize() {
  var mapStyles = [{
    "featureType": "landscape",
    "stylers": [{
      "saturation": -100
    }, {
      "lightness": 65
    }, {
      "visibility": "on"
    }]
  }, {
    "featureType": "poi",
    "stylers": [{
      "saturation": -100
    }, {
      "lightness": 51
    }, {
      "visibility": "simplified"
    }]
  }, {
    "featureType": "road.highway",
    "stylers": [{
      "saturation": -100
    }, {
      "visibility": "simplified"
    }]
  }, {
    "featureType": "road.arterial",
    "stylers": [{
      "saturation": -100
    }, {
      "lightness": 30
    }, {
      "visibility": "on"
    }]
  }, {
    "featureType": "road.local",
    "stylers": [{
      "saturation": -100
    }, {
      "lightness": 40
    }, {
      "visibility": "on"
    }]
  }, {
    "featureType": "transit",
    "stylers": [{
      "saturation": -100
    }, {
      "visibility": "simplified"
    }]
  }, {
    "featureType": "administrative.province",
    "stylers": [{
      "visibility": "on"
    }]
  }, {
    "featureType": "water",
    "elementType": "labels",
    "stylers": [{
      "visibility": "on"
    }, {
      "lightness": -25
    }, {
      "saturation": -100
    }]
  }, {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [{
      "hue": "#ffff00"
    }, {
      "lightness": -25
    }, {
      "saturation": -97
    }]
  }];

  var mapOptions = {
    disableDefaultUI: true,
    zoom: 3,
    styles: mapStyles,
    center: new google.maps.LatLng(54.73054, -46.51219),

  };

  var gmap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);



}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3">
</script>
<div id="map-canvas"></div>

谷歌地图api加载灰色地图而不是地图图像

1 个答案: