Javascript 在我的谷歌地图代码中，我在哪里添加地图样式的代码？_Javascript_Html_Google Maps_Google Maps Api 3

Javascript 在我的谷歌地图代码中，我在哪里添加地图样式的代码？

javascript html google-maps google-maps-api-3

Javascript 在我的谷歌地图代码中，我在哪里添加地图样式的代码？,javascript,html,google-maps,google-maps-api-3,Javascript,Html,Google Maps,Google Maps Api 3,我有以下自定义谷歌地图： <!DOCTYPE html> <html> <head> <style> #map { width: 700px; height: 700px; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script>

我有以下自定义谷歌地图：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 700px;
        height: 700px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng(41.2048114,8.0734625),
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

来源：

您应该将其添加到地图选项中：

var mapOptions = {
  center: new google.maps.LatLng(41.2048114,8.0734625),
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: [
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [
      { color: '#000000' },
      { weight: 1.6 }
    ]
  }, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [
      { saturation: -100 },
      { invert_lightness: true }
    ]
  }, {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [
      { hue: '#ffff00' },
      { gamma: 1.4 },
      { saturation: 82 },
      { lightness: 96 }
    ]
  }, {
    featureType: 'poi.school',
    elementType: 'geometry',
    stylers: [
      { hue: '#fff700' },
      { lightness: -15 },
      { saturation: 99 }
    ]
  }
]
}

另一个选项（除了将其放在google.maps.Map构造函数的mapOptions中）是在定义

Map

变量后，将代码放在

initialize

函数中：

代码片段：

函数初始化（）{
var mapCanvas=document.getElementById（'map'）；
变量映射选项={
中心：新google.maps.LatLng（41.2048114,8.0734625），
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（mapCanvas，mapOptions）；
map.set（'样式'[{
功能类型：“道路”，
elementType:“几何体”，
样式：[{
颜色：'#000000'
}, {
重量：1.6
}]
}, {
功能类型：“道路”，
elementType:'标签'，
样式：[{
饱和度：-100
}, {
倒置亮度：真
}]
}, {
功能类型：“景观”，
elementType:“几何体”，
样式：[{
色调：“#ffff00”
}, {
伽马：1.4
}, {
饱和度：82
}, {
亮度：96
}]
}, {
功能类型：“poi.school”，
elementType:“几何体”，
样式：[{
色调：“#fff700”
}, {
亮度：-15
}, {
饱和度：99
}]
}]);
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体
#地图{
宽度：100%；
身高：100%；
}

@LuckyChingi我是否应该有一个单独的JavaScript文件来链接，如果是这样，代码是否足够，或者我是否需要将其包含在类似于jQuery的documents ready函数的内容中？@ClarusDignus我在下面给你留了一个答案，你只需在你的map options对象中添加样式。我现在从你的答案中看到，我需要定义一个变量来应用set（）。谢谢你的选择。一种方法在任何方面都优于另一种方法吗？
var mapOptions = {
  center: new google.maps.LatLng(41.2048114,8.0734625),
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: [
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [
      { color: '#000000' },
      { weight: 1.6 }
    ]
  }, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [
      { saturation: -100 },
      { invert_lightness: true }
    ]
  }, {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [
      { hue: '#ffff00' },
      { gamma: 1.4 },
      { saturation: 82 },
      { lightness: 96 }
    ]
  }, {
    featureType: 'poi.school',
    elementType: 'geometry',
    stylers: [
      { hue: '#fff700' },
      { lightness: -15 },
      { saturation: 99 }
    ]
  }
]
}