0

我正在学习 JQUERY MOBILE 并尝试使用 jquery-ui-map 插件添加地图。地图显示正确，但我在向其添加标记时遇到问题。

像这样的函数： $('#map_canvas').gmap().bind('init', function(event, map) 或 $('#map_canvas').gmap({'callback': function() 永远不会被调用。为什么会这样？

**JS **
<script type="text/javascript">
        $(document).on("pageshow", '#map_page', function() {
                $('#map_canvas').gmap('refresh');

        });

        $('#map_canvas').gmap().bind('init', function(event, map) { 
        $(map).click( function(event) {
        $('#map_canvas').gmap('addMarker', {
            'position': event.latLng, 
            'draggable': true, 
            'bounds': false
        }, function(map, marker) {
            //do whatever you need with the maker utilizing this variable
            marker.__gm_id
        });
    });
    });


        $('#map_canvas').gmap().bind('init', function(ev, map) {
            console.log("GMAP Init");
            $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() {
        $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
    });
});


        $('#map_canvas').gmap({'callback': function() {
        var self = this; // we can't use "this" inside the click function (that refers to the marker object in this example)
        self.addMarker({'position': '57.7973333,12.0502107', 'bounds': true}).click(function() {
            self.openInfoWindow({'content': 'Hello World!'}, this);
            });
        }});


        $(document).on("pageinit", '#map_page', function(){
                $('#map_canvas').gmap({'center': '57.7973333,12.0502107'});
                console.log(" Init");

        });
</script>

头

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="jquery.ui.map.js"></script>
        <script type="text/javascript" src="jquery.ui.map.full.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="jquery.ui.map.services.js" type="text/javascript"></script>

        <style type="text/css"> 
            #map_page, #map_canvas { width: 100%; height: 100%; padding: 0; }
        </style>
4

1 回答 1

0

这就是你需要做的。注意，我没有测试过这个。所以请原谅任何错别字。

**JS **
<script type="text/javascript">
        $(document).on("pageshow", '#map_page', function() {
                $('#map_canvas').gmap('refresh');
        });


        $(document).on("pageinit", '#map_page', function(){
              $('#map_canvas').gmap({'center': '57.7973333,12.0502107'}).
                  bind('init', function() {
                      var self = this; // we can't use "this" inside the click function (that refers to the marker object in this example)
                      self.addMarker({'position': '57.7973333,12.0502107', 'bounds': true})
                   });
         });
</script>
于 2013-11-19T03:59:13.920 回答