无法在Google地图上查看标记

时间:2014-06-13 14:43:14

标签: javascript google-maps

我正在尝试在Google地图上放置一些标记。我在下面写了代码。

问题是我没有看到任何这些标记。

我检查了控制台,没有看到任何错误。

我做错了什么?

非常感谢。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Directions service</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
            #panel {
                position: absolute;
                top: 5px;
                left: 50%;
                margin-left: -180px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>            
            var map;
            var styles = [
                {
                    stylers: [
                        {hue: "#00ffe6"},
                        {saturation: -20}
                    ]
                }, {
                    featureType: "road",
                    elementType: "geometry",
                    stylers: [
                        {lightness: 100},
                        {visibility: "simplified"}
                    ]
                }, {
                    featureType: "poi",
                    elementType: "labels",
                    stylers: [
                        {visibility: "off"}
                    ]
                }, {
                    featureType: "transit",
                    elementType: "labels",
                    stylers: [
                        {visibility: "off"}
                    ]
                },
            ];


            function initialize() {                
                var home = new google.maps.LatLng(45.666396, 25.611569);
                var mapOptions = {
                    zoom: 15,
                    center: home
                }
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                map.setOptions({styles: styles});

            }

            var json = [
                                {
                    "title": "Triaj",
                    "lat": 45.67573,
                    "lng": 25.647464,
                    "description": "Test"                
                },                                {
                    "title": "Baza MTTC",
                    "lat": 45.671123,
                    "lng": 25.640974,
                    "description": "Test"                
                },                                {
                    "title": "RAT Brasov",
                    "lat": 45.669687,
                    "lng": 25.638461,
                    "description": "Test"                
                }                            ];

            for (var i = 0, length = json.length; i < length; i++) {
                var data = json[i], latLng = new google.maps.LatLng(data.lat, data.lng);

                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: data.title
                });                                
            }

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

        </script>
    </head>
    <body>        
        <div id="map-canvas"></div>
    </body>
</html>

1 个答案:

答案 0 :(得分:3)

你不应该将json和marker代码放在initialize - 函数中以触发它吗?

现在,没有任何东西触发for循环,因此标记不会显示。将var json =和所有内容放到initialize - 函数内的for循环的末尾,你应该很好:)