Question

这已经把我的面条烤了好几个月了，老实说，我是一名设计师而不是程序员，所以这种脚本比我使用的普通jquery / javascript有点难。

我找不到任何关于如何实现它的基本文档，除此之外，它不是非常直观的 - http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-mobile-example.html

我尝试过制作一个JSfiddle，但我甚至无法让它工作（现在感谢沙皇）

我已经构建了一个jQuery移动应用程序，我迫切希望使用融合表标记（来自我的融合表）来获取地理位置功能，并允许点击融合表标记以显示信息窗口。此信息窗口将在融合表中构建。

我需要地理位置来将地图置于设备当前位置的中心位置 - 如果地理位置不可用或设备用户拒绝，则地图需要以这些坐标52.450939，-1.721002为中心。

下一个级别是什么是拥有jQuery移动UI弹出窗口，但这并不重要，只是地图上的标准气泡很好。

更新的JSFiddle ... http://jsfiddle.net/twGHC/30/

我的融合表编号是： 1260763

默认位置为:(仅当地理位置不可用时） 52.450939，-1.721002

缩放级别： 13

任何建议都很棒，请随意JSfiddle它。提前谢谢。

Answer 1

这是一个有效的解决方案，它可以检测用户的位置，在其上放置一个标记并使用您的Fusion标记绘制地图。根据{{3}}：

$(function() {
  var position = new google.maps.LatLng(52.450939, -1.721002);

  getCurrentPosition = function(callback) {
    // Try W3C Geolocation (Preferred)
    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        function(pos) {
          position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
            callback(position);
          }, callback(position));         
    } // Try Google Gears Geolocation
    else if (google.gears) {
      var geo = google.gears.factory.create('beta.geolocation');
      geo.getCurrentPosition(
        function(pos) {
          position = new google.maps.LatLng(pos.latitude,pos.longitude);
          callback(position);
        }, callback(position));          
    } // Browser doesn't support Geolocation
    else {
      // Drop the user off in Coventry =)
      callback(position);
    }
  };
     // call the above function
  getCurrentPosition(InitMap);
});

function InitMap(pos) {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: pos,
    zoom: 14,
    mapTypeId: 'roadmap'
  });

  var marker = new google.maps.Marker({
    position: pos, 
    animation: google.maps.Animation.DROP,
    map: map, 
    title: "You are here, mate!"
  });   

var layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'Geocodable address',
    from: '1260763'
    },
  });

  layer.setMap(map);
};

当用户拒绝跟踪他的位置时，异常会在getCurrentPosition中被捕获，但是，此函数中的第二个可选参数是一个异常处理程序，因此我所做的只是传入callback(position)以便默认位置设置在地图上。如果您不想这样做，请将地图初始化程序代码从InitMap移出到单独的函数中，并在捕获异常时调用它，以显示空白地图。

在此处查看此行动：Google Maps v3 API documentation

P.S。如果您的下一个问题是“如何在标记点击上添加气球弹出窗口”，http://jsfiddle.net/twGHC/36/。

Answer 2

以下是使用jquery-ui-map的方法： http://jsfiddle.net/rweCf/1/ http://jsfiddle.net/rweCf/1/embedded/result/

如果您只想在客户位置的某个半径范围内进行更改，那么您就是这样做的 http://jsfiddle.net/Ywknf/1/（客户位置是初始点，所以每个人都可以看到结果）

如果网址无效或主干代码已更改，则以下是代码

$(function() {

  $('#map_canvas').gmap({'center': '52.450939, -1.721002', 'zoom': 10, 'disableDefaultUI': true, 'mapTypeId': 'terrain'}).bind('init', function(event, map) { 
        $('#map_canvas').gmap('getCurrentPosition', function(results, status) {
            if ( status === 'OK' ) {
                var position = new google.maps.LatLng(results.coords.latitude, results.coords.longitude);
                var marker = $('#map_canvas').gmap('get', 'markers > client' );
                if ( !marker ) {
                    $('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': position, 'bounds': true });
                } else {
                    marker.setPosition(position);
                    map.panTo(position);
                }
            } else if ( status === 'NOT_SUPPORTED' ) {
                $('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': $('#map_canvas').gmap('get', 'map').getCenter(), 'bounds': true });
            }
        });
        $('#map_canvas').gmap('loadFusion', { 'query': { 'select': 'Geocodable address', 'from': 1260763 } } );
    });  

});

jQuery Mobile + jQuery UI谷歌地图+融合标记

2 个答案: