草庐IT

关于 javascript:jQuery mobile 向现有地图添加新标记

codeneng 2023-03-28 原文

jQuery mobile add new markers to an existing map

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html lang="en">
   <head>
        jQuery mobile with Google maps - Google maps jQuery plugin
        <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 type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places">
        <script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js">
        <script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js">
        <script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js">
        <script type="text/javascript" src="js/demo.js">
        <script type="text/javascript" src="../ui/jquery.ui.map.js">
        <script type="text/javascript" src="../ui/jquery.ui.map.services.js">
        <script type="text/javascript" src="../ui/jquery.ui.map.extensions.js">
        <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');
            });
       
    </head>
    <body>

       
           
                jQuery mobile with Google maps v3 examples
                Back
           
               
               
                   
               
           
           
                Add Some More Markers
           
             
    </body>
</html>

请检查以下示例。

在第一个地图加载中没有任何标记。当您单击按钮时，会动态添加标记，无需刷新页面或地图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
    <html lang="en">
       <head>
            jQuery mobile with Google maps - Google maps jQuery plugin
            <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 src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en">
            <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js">
            <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 } );
                });
           
        </head>
        <body>
           
               
                    jQuery mobile with Google maps v3 examples
                    Back
               
                   
                   
                       
                   
                    Add Some More Markers
               
                 
        </body>
    </html>

初始地图：

按钮点击后的地图：

  • 完美的！非常感谢！我有一个非常简单的后续问题。如果我还想在单击地图上的标记时显示一个显示"hello world"的信息窗口，我该怎么做？我查看了文档，我有点困惑，因为我找不到任何具有 $('#map_canvas').gmap('addMarker', { 'position': chicago } ); 语法和信息窗口的示例。再次感谢。
  • 我在这里发布了后续问题，因此您可以通过回答获得更多声誉：stackoverflow.com/questions/12083564/...
  • 谢谢你，艾琳。我已经回答了这个问题:)
  • 抱歉，我没有看到你的第一条评论。我很高兴能帮上忙 :)

javascriptjQueryspannbspclassgoogle-maps-api-3jquery-mobilejquery-ui

有关关于 javascript:jQuery mobile 向现有地图添加新标记的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  3. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  4. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  5. ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2

    我注意到类定义，如果我打开classMyClass，并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义，我仍然想要与类定义相同的行为，但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了，我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同，类似于super，但不一定是子类？ 最佳答案 我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca

  6. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  7. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  8. ruby-on-rails - 在 Ruby on Rails 中添加 boolean 列值 - 2

    我正在开发一个创建网络博客的RubyonRails项目。我希望将一个名为featured的boolean数据库字段添加到Post模型中。该字段应该可以通过我添加的事件管理界面进行编辑。我使用了以下代码，但我什至没有在网站上显示另一列。$railsgeneratemigrationaddFeaturedfeatured:boolean$rakedb:migrate我是RubyonRails的新手，非常感谢任何帮助。我的index.html.erb文件中的相关代码(views):FeaturedPost架构.rb:ActiveRecord::Schema.define(:version=>

  9. ruby - 如何将便捷类方法添加到 ruby​​ 中的 Singleton 类 - 2

    假设我有一个这样的单例类:classSettingsincludeSingletondeftimeout#lazy-loadtimeoutfromconfigfile,orwhateverendend现在，如果我想知道使用什么超时，我需要编写如下内容:Settings.instance.timeout但我宁愿将其缩短为Settings.timeout使这项工作有效的一个明显方法是将设置的实现修改为:classSettingsincludeSingletondefself.timeoutinstance.timeoutenddeftimeout#lazy-loadtimeoutfromc

  10. ruby-on-rails - 向 Rails 3 添加 Ruby 扩展方法的最佳实践？ - 2

    我有一个要在我的Rails3项目中使用的数组扩展方法。它应该住在哪里？我有一个应用程序/类，我最初把它放在(array_extensions.rb)中，在我的config/application.rb中我加载路径:config.autoload_paths+=%W(#{Rails.root}/应用程序/类)。但是，当我转到railsconsole时，未加载扩展。是否有一个预定义的位置可以放置我的Rails3扩展方法？或者，一种预先定义的方式来添加它们？我知道Rails有自己的数组扩展方法。我应该将我的添加到active_support/core_ext/array/conversion

随机推荐