Question

我们在（使用JQuery Mobile的手机差距）中有一个基于位置的应用程序，该应用程序应该使用显示该位置位置的标记来加载谷歌地图。第一次加载后，地图不会刷新。我想根据地址显示不同的位置。

即使我使用死亡，现场似乎也没有解除束缚。

这是代码。

function loadMap(indexClicked){
  var offerPosition = getLatAndLong(indexClicked);
  var centerSettings = { 'center': offerPosition, 'zoom': 10 };
  initMap(centerSettings,indexClicked);
  refreshMap();
}

function initMap(centerSettings,indexClicked){
  $('#load-map').live('pageshow', function() {
    $('#map-canvas').gmap({'center': centerSettings.center, 'zoom': centerSettings.zoom, 'disableDefaultUI':true, 'callback': function() {
        var self = this;
        self.addMarker({'position': this.get('map').getCenter() }).click(function() {
            self.openInfoWindow({ 'content': showAdrressInMap(indexClicked) }, this);
        });
    }});
  });
}

function refreshMap(){
  $('#load-map').live('pageshow', function() {
    $('#map-canvas').gmap('refresh');
  });
}

在点击的每个按钮上调用函数loadMap。

PS ：第一次加载后，地图似乎被缓存并且每次都返回相同的地址。单击标记时，它会刷新工具提示中的地址，但位置似乎相同。我正在使用jquery mobile 1.0和手机差距1.3.0以及jquery.ui.map.js，jquery.ui.map.services.js，jquery.ui.map.extensions.js和modernizr.min.js

Answer 1

您可以使用以下方法清除标记，添加新标记并动态设置jQuery-ui-map的中心位置。

//clear all markers
$('#map_canvas').gmap('clear', 'markers');

// add a new marker
var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]});

// on marker click show the description
$marker.click(function() {
    $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this);
});

// update the map's center position             
$("#map_canvas").gmap("get", "map").panTo(new google.maps.LatLng(cityList[i][1], cityList[i][2]));

根据Google Maps documentation，panTo方法按照包含给定LatLngBounds所需的最小量来平移地图。它不能保证在地图上的界限将是什么，除了尽可能多的边界将是可见的。边界将位于由地图类型和导航（平移，缩放和街景视图）控件限定的区域内（如果它们存在于地图上）。如果边界大于地图，则地图将移动以包括边界的西北角。如果地图位置的变化小于地图的宽度和高度，则过渡将平滑地动画。

您可以在下面找到样本。如果按下芝加哥按钮，将添加一个标记，并将地图的中心位置更新为芝加哥

<!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 mobileDemo = { 'center': '41,-87', 'zoom': 7 },
                cityList = [
                    ['Chicago', 41.850033,-87.6500523, 1],
                    ['Kentucki', 37.735377,-86.572266, 2]
                ];

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

            function addMarker(i)
            {
                //clear all markers
                $('#map_canvas').gmap('clear', 'markers');

                // add a new marker
                var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]});

                // on marker click show the description
                $marker.click(function() {
                    $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this);
                });

                // set the map's center position
                $("#map_canvas").gmap("get", "map").panTo(new google.maps.LatLng(cityList[i][1], cityList[i][2]));
            }

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

            $(document).on('click', '.add-marker', function(e) {
                e.preventDefault();
                addMarker(this.id);
            });
        </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="#" id="0" class="add-marker" data-role="button" data-theme="b">Chicago</a>
                <a href="#" id="1" class="add-marker" data-role="button" data-theme="b">Kentucki</a>
            </div>
        </div>      
    </body>
</html>

我希望这会有所帮助。

JQuery Mobile：无法更新谷歌地图

1 个答案: