Question

我很困惑，因为昨天一切正常，但今天谷歌地图没有在网站上显示。我没有改变任何代码，浏览器控制台中有php或js错误。以下是完整代码：

<section class="row map_row">
        <div class="container">
            <h3 class="contact_section_title">Street Address:</h3>
            <div id="gmap" class="row m0"></div>
        </div>
    </section>

//    google map start
    (function($) {
        "use strict";

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

        var map;

        function init() {
            var mapOptions = {
                center: new google.maps.LatLng(26.201833, 78.159359),
                zoom: 13,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.DEFAULT,
                },
                panControl: true,
                disableDoubleClickZoom: false,
                mapTypeControl: false,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                },
                scaleControl: true,
                scrollwheel: false,
                streetViewControl: false,
                draggable : true,
                overviewMapControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                styles: [ 
//                    { featureType: "administrative", elementType: "all", stylers: [ { visibility: "on" }, { saturation: -100 }, { lightness: 20 } ] },
//                    { featureType: "road", elementType: "all", stylers: [ { visibility: "on" }, { saturation: -100 }, { lightness: 40 } ] },
//                    { featureType: "water", elementType: "all", stylers: [ { visibility: "on" }, { saturation: -10 }, { lightness: 30 } ] },
//                    { featureType: "landscape.man_made", elementType: "all", stylers: [ { visibility: "simplified" }, { saturation: -60 }, { lightness: 10 } ] },
//                    { featureType: "landscape.natural", elementType: "all", stylers: [ { visibility: "simplified" }, { saturation: -60 }, { lightness: 60 } ] },
//                    { featureType: "poi", elementType: "all", stylers: [ { visibility: "off" }, { saturation: -100 }, { lightness: 60 } ] }, 
//                    { featureType: "transit", elementType: "all", stylers: [ { visibility: "off" }, { saturation: -100 }, { lightness: 60 } ] }
                ]

            }

            var mapElement = document.getElementById('gmap');
            var map = new google.maps.Map(mapElement, mapOptions);

            var locations = [
                ['', 26.201833, 78.159359]
            ];
            for (var i = 0; i < locations.length; i++) {
                var marker = new google.maps.Marker({
                    icon: 'images/map-marker.png',
                    animation: google.maps.Animation.BOUNCE,
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                });
            }


    })(jQuery)
//    google map end

请帮助我。我还在学习这些东西。

Answer 1

你的代码中有很多错误，而且很难弄清楚究竟什么是错误的，因为只有这段HTML和Javascript混合在一起。

你的意思是说“浏览器控制台中有没有 php或js错误”吗？如果有错误，我们希望看到它。：）
您的JavaScript应位于<script></script>标记内，或者浏览器会认为此代码只是文本。
我将您的函数放入JSLint并完成了所有语法错误。我发现了几件事。首先，您使用map在JS的开头附近定义var map;，因此您不需要在此行的var函数之后使用init()关键字：{ {1}}。其次，你不应该在数组的最后一个元素之后添加逗号（或者如果数组中只有一个元素），例如在行var map = new google.maps.Map(mapElement, mapOptions);中。还有其他几个地方。第三，在zoomControlOptions: {style: google.maps.ZoomControlStyle.DEFAULT,},循环中，没有必要在条件中包含关键字for。所以var代替(i = 0; i < locations.length...。最后，你不应该在循环中声明变量，就像你在这里所做的那样：
```
(var i = 0; i < locations.length...
```
这在技术上就像写作：
```
for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
        icon: 'images/map-marker.png',
        animation: google.maps.Animation.BOUNCE,
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
    });
}
```
一遍又一遍。每个范围只应有一个标记变量。我建议使用数组来存储你的标记，如下所示：
```
    var marker;
    var marker;
    var marker;
    var marker;
```
以下是我编辑后的所有JavaScript：
```
var markers = [];
for (i = 0; i < locations.length; i++) {
    markers.push(new google.maps.Marker({
        icon: 'images/map-marker.png',
        animation: google.maps.Animation.BOUNCE,
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });
}
```
如果您使用此功能，我无法保证您获得成功，但至少可以解决大错误，也许您可以进行一些调试。

Google Map无法在HTML / JS网站中使用

1 个答案: