当我'm包含jQuery文件时，谷歌地图API停止工作

Google Maps API Stop Working when i'm include jQuery File

本文关键字：谷歌地图 API 停止工作 文件 jQuery 包含 当我      更新时间：2023-09-26

在那里我使用了Google Maps API，代码为我正常工作。但是当我尝试添加到jQuery库时，映射停止工作。

我很感激你的帮助。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex icons</title>
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script type="text/javascript">
        var infowindow = null;
        function initialize() {
            var mapOptions = {
                zoom: 10
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            setMarkers(map, sites);
            infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });
            /*
            var bikeLayer = new google.maps.BicyclingLayer();
            bikeLayer.setMap(map);
            */
            // Try HTML5 geolocation
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = new google.maps.LatLng(position.coords.latitude,
                                                     position.coords.longitude);

                    var infowindow = new google.maps.InfoWindow({
                        map: map,
                        position: pos,
                        content: 'Location found using HTML5.' + pos
                    });
                    map.setCenter(pos);
                }, function () {
                    handleNoGeolocation(true);
                });
            } else {
                // Browser doesn't support Geolocation
                handleNoGeolocation(false);
            }
        }
        function handleNoGeolocation(errorFlag) {
            if (errorFlag) {
                var content = 'Error: The Geolocation service failed.';
            } else {
                var content = 'Error: Your browser doesn''t support geolocation.';
            }
            var options = {
                map: map,
                position: new google.maps.LatLng(32.321458, 34.8531),
                content: content
            };
            var infowindow = new google.maps.InfoWindow(options);
            map.setCenter(options.position);
        }
        var sites = [
        ['Mount Evans', 32.32108, 34.85535, 4, 'This is Mount Evans.<h1>test</h1>'],
        ['Irving Homestead', 32.315939, 34.850630, 2, 'This is the Irving Homestead.'],
        ['Badlands National Park', 32.325890, 34.85175, 1, 'This is Badlands National Park'],
        ['Flatirons in the Spring', 32.35948, 34.85370, 3, 'These are the Flatirons in the spring.']
        ];
        function setMarkers(map, markers) {
            var image = {
                url: 'image/red-rounded04.png',
                // This marker is 20 pixels wide by 32 pixels tall.
                size: new google.maps.Size(32, 32),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(32, 32)
            };
            for (var i = 0; i < markers.length; i++) {
                var sites = markers[i];
                var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
                var marker = new google.maps.Marker({
                    position: siteLatLng,
                    map: map,
                    title: sites[0],
                    zIndex: sites[3],
                    html: sites[4],
                    icon: image
                });
                var contentString = "Some content";
                google.maps.event.addListener(marker, "click", function () {
                    //alert(this.html);
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);

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

当我试图包括jQuery文件，这是停止工作。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

没有javascript-error(在控制台中提到的消息只是一个警告)。

您已经包含了jquery-mobile，当它没有找到预期的结构时，它将修改文档的结构。

内容(#map-canvas)将被包装在另一个div中(类为.ui-page)。对于这个div，如果没有指定height, #map-canvas的100%将不起作用，因为100%将根据父元素(未定义)的已定义的height计算。

当你设置.ui-page的height时，你也会看到地图。到100%)，但我建议从阅读jquery-mobile-documentation

开始
相关文章：