Question

我正在使用jQuery移动谷歌地图示例，重点关注第一个“基本地图示例”。

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html

我希望能够动态添加标记到basic_map，但我遇到了一些麻烦。我是jQuery mobile和JavaScript的新手。

以下是我在jQuery移动UI网站上编辑的基本地图示例。如果将其保存在jQuery mobile demos文件夹中，则所有内容都应正确呈现。我在地图页面的底部添加了一个按钮，还添加了addMarkers功能。当您加载页面时，地图会显示在mobileDemo坐标(-41, 87)的中心位置，该位置靠近芝加哥，但不是那里。当您单击按钮时，我想在chicago点使用另一个标记更新地图，但屏幕显示为空白。

这只是我真正想做的一个模拟例子。在我更长，更复杂的程序中，我正在查询数据库以查找与查询匹配的地址，然后我想动态地将这些标记放在地图上。我需要对此源代码进行哪些更改才能绘制芝加哥点（或其他标记）？

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
        <link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.css" />
        <link type="text/css" rel="stylesheet" href="css/mobile.css" />
        <script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script> 
        <script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
        <script type="text/javascript" src="js/demo.js"></script>
        <script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
        <script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
        <script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
        <script type="text/javascript">

            var mobileDemo = { 'center': '41,-87', 'zoom': 7 };
            var chicago = new google.maps.LatLng(41.850033,-87.6500523);
            var map 
            function addMarkers(){
                map = new google.maps.Map(document.getElementById('map_canvas'));
                var marker = new google.maps.Marker({
                    map: map,
                    position: chicago
                });
            }

            $('#basic_map').live('pageinit', function() {
                demo.add('basic_map', function() {
                    $('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
                        var self = this;
                        self.addMarker({'position': this.get('map').getCenter() }).click(function() {
                            self.openInfoWindow({ 'content': 'Hello World!' }, this);
                        });
                    }}); 
                }).load('basic_map');
            });

            $('#basic_map').live('pageshow', function() {
                demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
            });
        </script>
    </head>
    <body>

        <div id="basic_map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
            </div>
            <div data-role="content">
                <a href="#" data-role="button" data-theme="b" onclick="addMarkers()">Add Some More Markers</a>
            </div>
        </div>      
    </body>
</html>

Answer 1

请查看以下示例。

在第一个地图加载中没有任何标记。单击该按钮后，将动态添加标记，而无需刷新页面或地图。

<!doctype html>
    <html lang="en">
       <head>
            <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
            <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
            <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
            <script type="text/javascript">

                var chicago = new google.maps.LatLng(41.850033,-87.6500523),
                mobileDemo = { 'center': '41,-87', 'zoom': 7 };

                function initialize() {
                    $('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
                }

                $(document).on("pageinit", "#basic-map", function() {
                    initialize();
                });

                $(document).on('click', '.add-markers', function(e) {
                        e.preventDefault();
                        $('#map_canvas').gmap('addMarker', { 'position': chicago } );
                });
            </script>
        </head>
        <body>
            <div id="basic-map" data-role="page">
                <div data-role="header">
                    <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
                    <a data-rel="back">Back</a>
                </div>
                <div data-role="content">   
                    <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                        <div id="map_canvas" style="height:350px;"></div>
                    </div>
                    <a href="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
                </div>
            </div>      
        </body>
    </html>

初始地图：

enter image description here

按钮点击后的地图：

enter image description here

jQuery mobile将新标记添加到现有地图

1 个答案: