Javascript 当i'；m包含jQuery文件_Javascript_Jquery_Google Maps

Javascript 当i'；m包含jQuery文件

javascript jquery google-maps

Javascript 当i'；m包含jQuery文件,javascript,jquery,google-maps,Javascript,Jquery,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

在那里，我使用了谷歌地图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>


复杂图标
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px；
}
var infowindow=null；
函数初始化（）{
变量映射选项={
缩放：10
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
设置标记（地图、地点）；
infowindow=新建google.maps.infowindow({
内容：“正在加载…”
});
/*
var bikeLayer=new google.maps.BicyclingLayer（）；
bikeLayer.setMap（map）；
*/
//试试HTML5地理定位
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos=新的google.maps.LatLng（position.coords.latitude，
位置坐标经度）；
var infowindow=new google.maps.infowindow({
地图：地图，
职位:pos,，
内容：“使用HTML5找到的位置”。+pos
});
地图设置中心（pos）；
}，函数（）{
手持导航（真）；
});
}否则{
//浏览器不支持地理位置
手动定位（假）；
}
}
函数handleNogeLocation（errorFlag）{
如果（错误标志）{
var content='错误：地理位置服务失败'；
}否则{
var content='错误：您的浏览器不支持地理位置'；
}
变量选项={
地图：地图，
位置：新google.maps.LatLng（32.321458,34.8531），
内容：内容
};
var infowindow=new google.maps.infowindow（选项）；
地图设置中心（选项位置）；
}
变量站点=[
['Mount Evans'，32.32108，34.85535，4，'这是埃文斯山测试'，
[Irving Homestead'，32.315939，34.850630，2，'这是Irving Homestead'，
[“荒地国家公园”，32.325890，34.85175，1，“这是荒地国家公园”，
[“春天的熨斗”，32.35948，34.85370，3，“这些是春天的熨斗。”
];
函数集合标记（映射、标记）{
变量图像={
url:'image/red-rounded04.png'，
//此标记宽20像素，高32像素。
大小：新的google.maps.size（32,32），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（32,32）
};
对于（var i=0；i


当我尝试包含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错误（控制台中提到的消息只是一个警告）
您已经包括了jquery mobile，它将在找不到预期结构时修改文档的结构
内容（#map canvas
）将被包装在另一个div中（使用类.ui页面
）。对于未指定此div aheight
，地图画布的100%
将无效，因为100%
将基于父元素（未定义）已定义的height
进行计算
当您设置.ui页面的高度
时，您也会看到地图（例如设置为100%
），但我建议您从阅读开始，什么时候包括jQuery？在地图脚本之前还是之后？在浏览器的javascript控制台中（在Chrome中单击鼠标右键并选择“Inspect element”并单击“console”），您是否看到在使用jQuery加载页面时报告的任何错误？嗨，我尝试包括之前和之后，Jason：这是我在javascript控制台中得到的结果：-event.returnValue已被弃用。请改用标准的event.preventDefault（）。