如何让谷歌地图风格在移动平台上工作？答案

【问题标题】：How do I get google maps style to work on mobile platforms?如何让谷歌地图风格在移动平台上工作？
【发布时间】：2013-10-15 19:21:16
【问题描述】：

我正在尝试向我的谷歌地图添加样式。但是在浏览器中打开页面时，样式有时不加载，有时却加载。

这是问题之一，但我猜可能与下一个问题有某种关系：

在移动平台（尝试过 android chrome、ios safari 和 windows phone IE）上打开页面时，样式永远不会加载。

如果这篇文章不正确或不符合标准，我很抱歉。这是我第一次在 stackoverflow 上发帖。

非常感谢您的帮助！

function initialize() {

var mapOptions = {
zoom: 13,
};
map = new google.maps.Map(document.getElementById('mapCanvas'),
  mapOptions);



if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);

  var infowindow = new google.maps.InfoWindow({
    map: map,
    position: pos,
    content: 'This is you'
  });

  map.setCenter(pos);
}, function() {
  handleNoGeolocation(true);
});
} else {
handleNoGeolocation(false);
}
}

var styles = [
{
"elementType": "labels.text.fill",
"stylers": [
  { "invert_lightness": true },
  { "gamma": 0.01 },
  { "hue": "#e500ff" }
]
},{
"elementType": "geometry",
"stylers": [
  { "hue": "#00fff7" }
]
},{
"stylers": [
  { "gamma": 0.78 },
  { "visibility": "on" },
  { "invert_lightness": true }
]
}
]


function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'This is not where you are, right?';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setOptions({styles: styles});
map.setCenter(options.position);

}

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

然后HTML是：

    <link rel="shortcut icon" href="images/favicon.ico">
<link href='css/style.css' rel='stylesheet' />

<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src='js/main.js'></script>

<style>
body {
    margin:0; padding:0;
}

#mapCanvas {
    position:absolute; top:0; bottom:0; width:100%;
    z-index: 1;
}


</style>
</head>
<body onload="initialize()">

<div id="mapCanvas"></div>

【问题讨论】：

标签： javascript android google-maps mobile styles

【解决方案1】：

这些是如何实现谷歌地图的示例

        <!DOCTYPE html>
        <html> 
        <head> 
          <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
          <title>Google Maps Multiple Markers</title> 
          <script src="http://maps.google.com/maps/api/js?sensor=false" 
                  type="text/javascript"></script>
          <script src="js/main.js"></script>
    <script src="cordova.js"></script>
        </head> 
        <body>
          <div id="map" style="width: 500px; height: 400px;"></div>     
        </body>
        </html>

在 main.js 中

    var locations = [
              ['Bondi Beach', -33.890542, 151.274856, 4],
              ['Coogee Beach', -33.923036, 151.259052, 5],
              ['Cronulla Beach', -34.028249, 151.157507, 3],
              ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
              ['Maroubra Beach', -33.950198, 151.259302, 1]
            ];

            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 10,
              center: new google.maps.LatLng(-33.92, 151.25),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {  
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
              });

              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  infowindow.setContent(locations[i][0]);
                  infowindow.open(map, marker);
                }
              })(marker, i));
            }
          </script>

【讨论】：