0

我正在尝试将一组样式应用于带有标记的地图。这是基于我正在努力以任何可能的方式组合的两个功能示例。不用说，我还没有成功。

这是我的想法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px; }
    #map_canvas { height: 80% ; width:100%; //*position:(100,0);*//}
        #content {}
    </style>
    <script type="text/javascript"
  src="http://maps-api-tt.appspot.com/apilite/styled/apiv3.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(51.795624, 15.724284);
            var settings = {
                zoom: 18,
                center: latlng,
                mapTypeControl: true,
                mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT},
                navigationControl: false,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            var styles = {
      "map_canvas": [
        {
          featureType: 'all',
          rules: [ 
              { "invert_lightness": true },
              { "weight": 0.5 }, 
              { "lightness": 5 },
              { "gamma": 1.58 }, 
              { "saturation": 2 }
          ]
        }
      ]
    };
            var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
            var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">heading</h1>'+
                '<div id="bodyContent">'+
                '<p>sample txt</p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var companyImage = new google.maps.MarkerImage('images/logoo.png',
                new google.maps.Size(337,191),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var companyShadow = new google.maps.MarkerImage('images/logoo_shadow.png',
                new google.maps.Size(337,191),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var companyPos = new google.maps.LatLng(51.796414, 15.724155);

            var companyMarker = new google.maps.Marker({
                position: companyPos,
                map: map,
                icon: companyImage,
                shadow: companyShadow,
                title:"Kacza Górka Park Sportowy",
                zIndex: 3});

            var skateImage = new google.maps.MarkerImage('images/skate.png',
                new google.maps.Size(100,100),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var skateShadow = new google.maps.MarkerImage('images/skate_shadow.png',
                new google.maps.Size(100,100),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var skatePos = new google.maps.LatLng(51.795623, 15.724286);

            var skateMarker = new google.maps.Marker({
                position: skatePos,
                map: map,
                icon: skateImage,
                shadow: skateShadow,
                title:"skate park",
                zIndex: 2
            });

            var parkingImage = new google.maps.MarkerImage('images/parking.png',
                new google.maps.Size(50,50),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var parkingShadow = new google.maps.MarkerImage('images/parking_shadow.png',
                new google.maps.Size(70,50),
                new google.maps.Point(0,0),
                new google.maps.Point(60, 50)
            );

            var parkingPos = new google.maps.LatLng(57.0437, 9.9147);

            var parkingMarker = new google.maps.Marker({
                position: parkingPos,
                map: map,
                icon: parkingImage,
                shadow: parkingShadow,
                title:"Parking Lot",
                zIndex: 1
            });

            google.maps.event.addListener(companyMarker, 'click', function() {
                infowindow.open(map,companyMarker);
            });
        }
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas"></div>
</body>

我已经尝试了一段时间，但无法弄清楚，我会感谢所有输入。

4

1 回答 1

0

您可能会在下面找到样式化地图的干净示例。当您按下“添加一些标记”链接时，地图上就会添加新的标记。

为了为您的地图创建新样式，您可以使用Google Style Maps Wizard，它会自动生成 JSON 对象以传递给 MapOptions 对象的样式属性，以便将样式应用于 Maps API v3 地图。

<!doctype html>
<html lang="en">

    <head>
        <title>Google Maps</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script type="text/javascript">
            var cityList = [
                    ['Chicago', 41.850033, -87.6500523, 1],
                    ['Illinois', 40.797177, -89.406738, 2]
                ],
                demoCenter = new google.maps.LatLng(41, -87),
                map,
                styles = [{
                    stylers: [{
                        hue: "#00ffe6"
                    }, {
                        saturation: -20
                    }]
                }, {
                    featureType: "road",
                    elementType: "geometry",
                    stylers: [{
                        lightness: 100
                    }, {
                        visibility: "simplified"
                    }]
                }, {
                    featureType: "road",
                    elementType: "labels",
                    stylers: [{
                        visibility: "off"
                    }]
                }];

            function initialize() {
                var styledMap = new google.maps.StyledMapType(styles, {
                        name: "Styled Map"
                    }),
                    mapOptions = {
                        zoom: 7,
                        center: demoCenter,
                        mapTypeControlOptions: {
                            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                        }
                    };

                map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
                map.mapTypes.set('map_style', styledMap);
                map.setMapTypeId('map_style');
            }

            function addMarkers() {
                var marker,
                i,
                infowindow = new google.maps.InfoWindow();

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

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

            $(document).ready(function () {
                initialize();
            });

            $(document).on('click', '.add-markers', function (e) {
                e.preventDefault();
                addMarkers();
            });
        </script>
    </head>

    <body>
        <div id="basic-map">
            <div id="map_canvas" style="height:350px;"></div>
            <a href="#" class="add-markers">Add Some Markers</a>
        </div>
    </body>

</html>

我希望这有帮助。

于 2013-03-03T09:32:37.780 回答