簡體   English   中英

在Google Maps地圖上看不到標記

[英]Can't see markers on a Google Maps map

我正在嘗試在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>

您是否不應該將json和標記代碼放入initialize -function中以觸發它?

目前,什么都沒有觸發for循環,因此標記不會顯示。 var json =和所有內容放到initialize -function內部for循環的末尾,您應該會很好:)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM