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

Question

这几个月来一直在烤我的面条，老实说，我是一名设计师而不是程序员，所以这种类型的脚本比我使用的普通 jquery/javascript 更难。

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

我尝试过制作一个 JSfiddle，但我什至无法让它工作（感谢 Tsar，现在可以工作了）

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

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

下一个级别是有 jQuery 移动 UI 弹出窗口，但这并不重要，只要地图上的标准气泡就可以了。

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

我的融合表号是：1260763

默认位置是：（仅当地理位置不可用时）52.450939, -1.721002

缩放级别：13

任何建议都会很棒，请随意使用 JSfiddle。提前致谢。

Answer 1

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

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

如果 url 不起作用或中继代码更改，这里是代码

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

});

Answer 2

这是一个可行的解决方案，它可以检测用户的位置，在其上放置一个标记并使用您的 Fusion Markers 绘制地图。根据Google Maps v3 API documentation：

$(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 移出到单独的函数中，并在捕获异常时调用它以显示空白地图。

在此处查看实际操作：http://jsfiddle.net/twGHC/36/

附：如果您的下一个问题是“如何在标记点击时添加气球弹出窗口”，here's what you need to do。