Question

以下代码在一个域中正常工作，另一个在地图中不会显示。为什么会这样？

两个站点的内容与客户端迁移新地址的过程完全相同。

在旧域中，地图工作正常。在新的一个中出现错误。

HTML

<div id="canvas">              
    <div id="map-canvas"></div>
</div>

JavaScrip

    <script src="https://maps.googleapis.com/maps/api/js"></script>

    <script>
    function initialize() {

    //-----------------------------Stiles --------------------------------:

    var styles = [ { "featureType": "landscape.man_made", "elementType": "geometry.fill", "stylers": [ { "hue": 

    "#66ff00" }, { "saturation": 43 }, { "visibility": "on" }, { "lightness": -46 } ] },{ 

    "featureType": "landscape.natural", "stylers": [ { "visibility": "on" }, { "hue": "#3bff00" }, 

    { "lightness": -53 }, { "saturation": 33 } ] },{ "featureType": "landscape.natural.terrain", 

    "stylers": [ { "visibility": "off" } ] },{ "featureType": "water", "stylers": [ { "lightness": 

    -61 }, { "saturation": -60 }, { "hue": "#1aff00" } ] },{ "featureType": "road.highway", 

    "elementType": "geometry.fill", "stylers": [ { "visibility": "on" }, { "hue": "#4cff00" }, { 

    "lightness": -69 } ] },{ "featureType": "road.highway", "elementType": "geometry.stroke", 

    "stylers": [ { "visibility": "off" } ] },{ "featureType": "road.arterial", "elementType": 

    "geometry.fill", "stylers": [ { "visibility": "on" }, { "saturation": 57 }, { "hue": "#22ff00" 

    }, { "lightness": -68 } ] },{ "featureType": "road.arterial", "elementType": "geometry.stroke", 

    "stylers": [ { "visibility": "off" } ] },{ "featureType": "road.local", "elementType": 

    "geometry.fill", "stylers": [ { "hue": "#55ff00" }, { "lightness": -64 }, { "saturation": 58 } 

    ] },{ "featureType": "road.local", "elementType": "geometry.stroke", "stylers": [ { 

    "visibility": "off" } ] },{ "featureType": "road", "elementType": "labels.text.fill", 

    "stylers": [ { "color": "#ffffff" }, { "visibility": "on" } ] },{ "featureType": "road", 

    "elementType": "labels.text.stroke", "stylers": [ { "visibility": "off" } ] },{ "featureType": 

    "road", "elementType": "labels.icon", "stylers": [ { "visibility": "on" }, { "hue": "#6eff00" 

    }, { "lightness": -2 }, { "saturation": -42 } ] },{ "featureType": "poi", "elementType": 

    "geometry.fill", "stylers": [ { "visibility": "on" }, { "color": "#8080ff" }, { "hue": 

    "#66ff00" }, { "saturation": -30 }, { "lightness": -45 } ] },{ "featureType": "poi", 

    "elementType": "labels.text.stroke", "stylers": [ { "color": "#808080" }, { "visibility": "off" 

    } ] },{ "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "visibility": 

    "on" }, { "color": "#ffffff" } ] },{ "featureType": "administrative", "elementType": 

    "labels.text.fill", "stylers": [ { "color": "#ffffff" }, { "visibility": "on" } ] },{ 

    "featureType": "administrative", "elementType": "labels.text.stroke", "stylers": [ { 

    "visibility": "on" }, { "hue": "#66ff00" }, { "saturation": 31 }, { "lightness": -76 } ] },{ 

    "featureType": "water", "elementType": "labels.text", "stylers": [ { "color": "#ffffff" }, { 

    "visibility": "on" } ] },{ "featureType": "water", "elementType": "labels.text.stroke", 

    "stylers": [ { "color": "#2a6028" } ] },{ "featureType": "transit.line", "elementType": 

    "geometry.fill", "stylers": [ { "visibility": "on" }, { "color": "#97f845" } ] },{ 

    "featureType": "transit.station", "elementType": "labels.text.fill", "stylers": [ { "color": 

    "#ffffff" } ] },{ "featureType": "transit.station", "elementType": "labels.text.stroke", 

    "stylers": [ { "visibility": "off" } ] } ]


    //-----------------------------------------------------------------------:

      var mapOptions = {
        zoom: 15,
        styles: styles,
        center: new google.maps.LatLng(40.115, -8.251),
        scrollwheel: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);


    //----------------------------- Marker --------------------------------:

      var image = 'images/logo-map-10.png';
      var myLatLng = new google.maps.LatLng(40.11218, -8.25144);
      var tipografiaMarker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image,
          animation: google.maps.Animation.BOUNCE,
      });
    }


    //-----------------------------------------------------------------------:

    google.maps.event.addDomListener(window, 'load', initialize);

    <script>

Answer 1

js：35 Google Maps API错误：MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

自去年夏天以来，您必须使用API密钥并将其限制在某个域中。

相同的Google地图无法在新域中使用

1 个答案: