google-maps-api-3 - jQuery Mobile + jQuery UI 谷歌地图 + 融合标记

Question

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

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

我试过制作一个 JSfiddle，但我什至无法让它工作 (感谢沙皇现在工作)

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

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

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

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

我的融合表号是: 1260763

默认位置是:(仅本地理位置不可用时) 52.450939, -1.721002

缩放级别: 13

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

Answer 1

这是一个可行的解决方案，它检测用户的位置，在其上放置一个标记并使用您的 Fusion Markers 绘制 map 。根据 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)。以便在 map 上设置默认位置。如果您不想这样做，请从 InitMap 中移出 map 初始化程序代码进入单独的函数并在捕获异常时调用它以显示空白 map 。

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

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