JQuery Mobile：无法更新谷歌地图

发布于 2024-12-27 11:06:37 字数 1238 浏览 0 评论 0原文

我们有一个基于位置的应用程序（使用 JQuery Mobile 的 Phone Gap），它应该加载谷歌地图，并带有显示该地点位置的标记。第一次加载后，地图不会刷新。我想根据地址显示不同的位置。

即使我使用die，live似乎也没有解除绑定。

这是代码。

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

原文

We have a location based app in (Phone Gap using JQuery Mobile) which is supposed to load google map with a marker showing the position of the place. After the first load the map doesn't refresh. I want to show different locations based on the address.

The live doesn't seem to get unbinded even if I use die.

Here is the code.

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

The function loadMap is called on every button clicked.

PS: After the first load the map seems to get cached and returns the same address every time. When clicking on the marker it refreshes address in the tooltip but the postion seems to be same. I am using jquery mobile 1.0 with phone gap 1.3.0 along with jquery.ui.map.js, jquery.ui.map.services.js, jquery.ui.map.extensions.js and modernizr.min.js

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黯淡〆 2025-01-03 11:06:37

您可以使用以下方法来清除标记、添加新标记并动态设置 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 地图文档，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>

我希望这会有所帮助。

You may use the following approach in order to clear the markers, add new markers and set dynamically the center position of the 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]));

According the Google Maps documentation, the panTo method pans the map by the minimum amount necessary to contain the given LatLngBounds. It makes no guarantee where on the map the bounds will be, except that as much of the bounds as possible will be visible. The bounds will be positioned inside the area bounded by the map type and navigation (pan, zoom, and Street View) controls, if they are present on the map. If the bounds is larger than the map, the map will be shifted to include the northwest corner of the bounds. If the change in the map's position is less than both the width and height of the map, the transition will be smoothly animated.

Below you can find a sample. If you press the Chicago button a marker will be added and map's center position will be updated to the Chicago

<!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>

I hope this helps.

回复收藏 0 原文

~没有更多了~