0

我在一个新项目中使用这个演示:http: //jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map

我唯一要改变的是,我会将地图上预加载的目的地放大一点。

我正在努力解决的是......我如何让地图标记显示在加载的目标位置?

这是工作地图的清理版本(只需要链接到现代化器)。如果有人可以修改以在地图上显示标记(加载时的目的地,以及在更改地图的起点时下降),那么您将成为救星。

非常感谢-戴夫

<!doctype html>
<html lang="en">
        <head>
        <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link type="text/css" rel="stylesheet" href="http://jquery-ui-map.googlecode.com/svn/trunk/demos/css/jquery-mobile-1.0/jquery.mobile.css" />
        <link rel="stylesheet" href="http://jquery-ui-map.googlecode.com/svn/trunk/demos/css/mobile.css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
        <script type="text/javascript" src="../js/modernizr.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/demos/js/demo.js"></script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.js"></script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.services.js"></script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
        <script type="text/javascript">

            var mobileDemo = { 'center': '40.74843,-73.98566', 'zoom': 18 };

            ////////////////////////////////////////////////////////////

            $('#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');
            });

            ////////////////////////////////////////////////////////////

            $('#directions_map').live('pageinit', function() {
                demo.add('directions_map', function() {
                    $('#map_canvas_1').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
                        var self = this;
                        self.set('getCurrentPosition', function() {
                            self.refresh();
                            self.getCurrentPosition( function(position, status) {
                                if ( status === 'OK' ) {
                                    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
                                    self.get('map').panTo(latlng);
                                    self.search({ 'location': latlng }, function(results, status) {
                                        if ( status === 'OK' ) {
                                            $('#from').val(results[0].formatted_address);
                                        }
                                    });
                                } else {
                                    alert('Unable to get current position');
                                }
                            });
                        });
                        $('#submit').click(function() {
                            self.displayDirections({ 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {
                                ( status === 'OK' ) ? $('#results').show() : $('#results').hide();
                            });
                            return false;
                        });
                    }});
                }).load('directions_map');
            });

            $('#directions_map').live('pageshow', function() {
                demo.add('directions_map', $('#map_canvas_1').gmap('get', 'getCurrentPosition')).load('directions_map');
            });

            ////////////////////////////////////////////////////////////

            $('#gps_map').live('pageinit', function() {
                demo.add('gps_map', function() {
                    $('#map_canvas_2').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function(map) {
                        var self = this;
                        self.watchPosition(function(position, status) {
                            if ( status === 'OK' ) {
                                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                                if ( !self.get('markers').client ) {
                                    self.addMarker({ 'id': 'client', 'position': latlng, 'bounds': true });
                                } else {
                                    self.get('markers').client.setPosition(latlng);
                                    map.panTo(latlng);
                                }
                            }
                        });
                    }});
                }).load('gps_map');
            });

            $('#gps_map').live('pageshow', function() {
                demo.add('gps_map', function() { $('#map_canvas_2').gmap('refresh'); }).load('gps_map');
            });

            $('#gps_map').live("pagehide", function() {
                demo.add('gps_map', function() { $('#map_canvas_2').gmap('clearWatch'); }).load('gps_map');
            });

            ////////////////////////////////////////////////////////////

            $('#places').live('pageinit', function() {
                demo.add('places_1', function() {
                    $('#map_canvas_3').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
                        var self = this;
                        var control = self.get('control', function() {
                            $(self.el).append('<div id="control"><div><input id="places-search" class="ui-bar-d ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d ui-autocomplete-input" type="text"/></div></div>');
                            self.autocomplete($('#places-search')[0], function(ui) {
                                self.clear('markers');
                                self.set('bounds', null);
                                self.placesSearch({ 'location': ui.item.position, 'radius': '5000' }, function(results, status) {
                                    if ( status === 'OK' ) {
                                        $.each(results, function(i, item) {
                                            self.addMarker({ 'id': item.id, 'position': item.geometry.location, 'bounds':true }).click(function() {
                                                self.openInfoWindow({'content': '<h4>'+item.name+'</h4>'}, this);
                                            });
                                        });
                                    }
                                });
                            });
                            return $('#control')[0];
                        });
                        self.addControl(new control(), 1);
                    }});
                }).load('places_1');
            });

            $('#places').live('pageshow', function() {
                demo.add('places_2', function() { $('#map_canvas_3').gmap('refresh'); }).load('places_2');
            });

        </script>
        </head>
<body>
<div id="directions_map" data-role="page"><div data-role="content">

    <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
      <div id="map_canvas_1" style="height:300px;"></div>
          <p>
            <label for="from">From</label>
            <input id="from" class="ui-bar-c" type="text" value="" />
          </p>
          <p>
            <label for="to">To</label>
            <input id="to" class="ui-bar-c" type="text" value="350 5th Ave, New York, NY 10118" />
          </p>
          <a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>
      </div>

    <div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
      <div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">Results</div>
      <div id="directions"></div>
      <div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-bottom ui-btn-up-undefined"></div>
    </div>

</div></div>

</body>
</html>
4

1 回答 1

0

找到了解决方案:

我在“基本地图”部分找到了这个片段并将其应用于“方向图”部分:

self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});

就在下面:

var self = this
于 2013-03-27T20:04:47.867 回答