Question

我在实施Google Maps APi风格的地图时遇到了一些麻烦，我可以通过移除var样式和放大来获得位置和自定义标记。 map.setoptions）但是当我尝试在地图中添加谷歌样式编码时不再有效，任何想法？

<script type="text/javascript">
      function initialize() {
        var styles = [ 
          { 
          featureType: "water", 
          elementType: "geometry.fill",
          stylers: [ 
            { color: "#73b6e6" }
            ] 
            },{
          featureType: "road.highway",
          elementType: "geometry.fill",
          stylers: [ 
            { color: "#ffffff" } 
            ] 
            },{
          featureType: "road.highway",
          elementType: "geometry.stroke",
          stylers: [
            { color: "#c8c8c8" }
            ] 
            },{
          featureType: "road.local",
          stylers: [ 
            { color: "#ffffff" } 
            ] 
            },{
          featureType: "road.arterial",
          elementType: "geometry.fill", 
          stylers: [ 
            { color: "#ffffff" } 
            ] 
            },{
          featureType: "road.arterial",
          elementType: "geometry.stroke",
          stylers: [ 
            { color: "#c8c8c8" } 
            ] 
            },{
          featureType: "road.highway",
          elementType: "labels.text.stroke",
          stylers: [ 
            { visibility: "off" } 
            ] 
            },{
          featureType: "road.arterial", 
          elementType: "labels.text.stroke",
          stylers: [ { visibility: "off" } 
            ] 
            },{
          featureType: "poi",
          elementType: "labels",
          stylers: [ { "visibility": "off" } 
            ] 
            },{
          featureType: "poi.park",
          stylers: [ { color: "#cae6a9" } 
            ] 
            },{
          featureType: "administrative.neighborhood",
          elementType: "labels.text.fill",
          stylers: [ { "visibility": "off" } 
            ] 
            }
        ];
        map.setOptions({styles: styles});
        var mapOptions = {
          center: new google.maps.LatLng(-34.94533,138.58934),
          zoom: 14,
          scrollwheel: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("location-map"),
            mapOptions);
        var image = 'images/main/location.png';
        var myLatLng = new google.maps.LatLng(-34.94533,138.58934);
        var beachMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });
      };
    </script>

HTML代码

<div id="location-map" style="background-color: #E5E3DF; overflow: hidden;">
</div>

Answer 1

在您创建之前，map var不存在，但您在此行之前调用了map.setOptions：

var map = new google.maps.Map(document.getElementById("location-map"),
            mapOptions);

移动这一行：

map.setOptions({styles: styles});

之后：

var map = new google.maps.Map(document.getElementById("location-map"),
            mapOptions);

Google Maps Api V3样式地图

1 个答案: