javascript - 谷歌地图没有显示我的位置

Question

我想在谷歌地图上显示一个位置，但我不知道我的错误在哪里。没有显示任何东西:

   <div id="map-canvas" style="width:100%; height:300px;">

   </div>

.
.
.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
      <script>
            // Google map
            if ($('#map-canvas').length) {
                        var
                        GOOGLE_MAP_LAT = 40.7564971,
                        GOOGLE_MAP_LNG = -73.9743277;
                var map,
                        service;
                jQuery(function($) {
                    $(document).ready(function() {
                        var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
                        var myOptions = {
                            zoom: 14,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };

                        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map
                        });
                        marker.setMap(map);


                        $('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
                            google.maps.event.trigger(map, 'resize');
                            map.setCenter(latlng);
                        });
                    });
                });
            }

        </script>
</body>

已更新

我的控制台消息:

Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.js:1:0
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
SyntaxError: expected expression, got '<' myjs.js:1:0
TypeError: $(...).position(...) is undefined
 custom.js:308:20
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

Answer 1

我认为你需要包含 jquery 库，因为你正在使用 $(document).ready(function() 。我已经通过添加 jquery 库更新了您的代码。请尝试下面的代码，希望它能工作。

    <div id="map-canvas" style="width:100%; height:300px;">

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        // Google map
        if ($('#map-canvas').length) {
                    var
                    GOOGLE_MAP_LAT = 40.7564971,
                    GOOGLE_MAP_LNG = -73.9743277;
            var map,
                    service;
            jQuery(function($) {
                $(document).ready(function() {
                    var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
                    var myOptions = {
                        zoom: 14,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map
                    });
                    marker.setMap(map);


                    $('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
                        google.maps.event.trigger(map, 'resize');
                        map.setCenter(latlng);
                    });
                });
            });
        }

    </script>