当我包含jQuery文件时，Google Maps API停止工作(Google Maps API Stop Working when i'm include jQuery File)

在那里，我使用了Google Maps API，代码可以正常使用。但是当我尝试添加到jQuery Libary时，地图停止工作。

我很感激你的帮助。

<!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文件时，它就会停止工作。

There I used the Google Maps API and the code works for me properly. But when I try to add to the jQuery Libary, the map stops working.

I would appreciate your help.

<!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>

And when i'm try to include the jQuery File, it's stop work.

最满意答案

没有javascript错误（控制台中提到的消息只是一个警告）。

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

内容（ #map-canvas ）将包装在另一个div中（使用类.ui-page ）。对于此div，未指定height ， #map-canvas的100%将无效，因为100%将根据父元素的定义height （未定义）计算。

设置.ui-page的height时也会看到地图（例如100% ），但我建议先阅读jquery-mobile-documentation

There is no javascript-error (the mentioned message in the console is only a warning).

You have included jquery-mobile, which will modify the structure of the document when it doesn't find the expected structure.

The content (#map-canvas) will be wrapped in another div(with the class .ui-page). For this div a height isn't specified, the 100% for #map-canvas will have no effect, because the 100% will be calculated based on the defined height of the parent element(which is not defined).

You will see the map when you set the height of .ui-page too(e.g. to 100%), but I would suggest to start by reading the jquery-mobile-documentation

更多推荐