个人中心
gpt4 book ai didi

google-maps - jQuery Mobile : can't update google map

转载 作者：行者123 更新时间：2023-12-01 06:42:44 24 4
gpt4 key购买 nike

我们在(使用 JQuery Mobile 的电话间隙)中有一个基于位置的应用程序，它应该加载带有显示该地点位置的标记的谷歌地图。第一次加载后， map 不会刷新。我想根据地址显示不同的位置。

即使我使用 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 :第一次加载后， map 似乎被缓存并每次返回相同的地址。单击标记时，它会刷新工具提示中的地址，但位置似乎相同。我正在使用带有电话间隙 1.3.0 的 jquery mobile 1.0 以及 jquery.ui.map.js、jquery.ui.map.services.js、jquery.ui.map.extensions.js 和 modernizr.min.js

最佳答案

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



您可以在下面找到一个示例。如果您按下芝加哥按钮，将添加一个标记，并且 map 的中心位置将更新为芝加哥 
<!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>

我希望这有帮助。

关于google-maps - jQuery Mobile : can't update google map，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8895032/

24 4 0
文章推荐： drupal-6 - URL 中未指定 XHProf 运行
文章推荐： java - java 布局的问题
文章推荐： sass - 我可以在同一个项目中同时使用 LESS 和 SCSS 还是必须进行转换？
文章推荐： json - Spring 启动 JsonMappingException : Object is null
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com