Question

我正在构建一个周期信息网站，并希望能够从iPhone获取用户位置，以便我更新我的Google地图并向用户提供相关信息。有一个名为Geolocation的Drupal模块，它使用HTML5选项执行此操作，我在下面的模块中找到了它正在执行任务的代码。

// START: Autodetect clientlocation.
          // First use browser geolocation
          if (navigator.geolocation) {
            browserSupportFlag = true;
            $('#geolocation-help-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').append(Drupal.t(', or use your browser geolocation system by clicking this link') +': <span id="geolocation-client-location-' + i + '" class="geolocation-client-location">' + Drupal.t('My Location') + '</span>');
            // Set current user location, if available
            $('#geolocation-client-location-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').click(function() {
              navigator.geolocation.getCurrentPosition(function(position) {
                latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                Drupal.Geolocation.maps[i].setCenter(latLng);
                Drupal.Geolocation.setMapMarker(latLng, i);
                Drupal.Geolocation.codeLatLng(latLng, i, 'geocoder');
              }, function() {
                Drupal.Geolocation.handleNoGeolocation(browserSupportFlag, i);
              });
            });
          }

是否有人有任何Google Maps API V3实施此类或类似的经验？我希望用户必须单击“我的位置”或等效，然后使用他们的iPhone位置更新地图而不是自动请求它。这是我的地图和我所拥有的标记数组。我如何利用iPhone的位置来更新它？

function initialize() {

  var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(51.51251523, -0.133201961),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);

  setMarkers(map, spots);
}


var spots = [

['Marylebone', 51.51811784, -0.144228881, '2.png', 2901, 'Broadcasting House - Marylebone</br>Available Bikes: 1</br>Number of Docks: 13</br> View more information about <a href="/node/2901">this dock</a>'],


['Fitzrovia', 51.51991453, -0.136039674, '3.png', 2908, 'Scala Street - Fitzrovia</br>Available Bikes: 8</br>Number of Docks: 21</br> View more information about <a href="/node/2908">this dock</a>'],


['Fitzrovia', 51.52351808, -0.143613641, '3.png', 2923, 'Bolsover Street - Fitzrovia</br>Available Bikes: 6</br>Number of Docks: 19</br> View more information about <a href="/node/2923">this dock</a>'],


['Fitzrovia', 51.52025302, -0.141327271, '3.png', 2975, 'Great Titchfield Street - Fitzrovia</br>Available Bikes: 5</br>Number of Docks: 19</br> View more information about <a href="/node/2975">this dock</a>'],


['Bloomsbury', 51.51858757, -0.132053392, '3.png', 2982, 'Bayley Street  - Bloomsbury</br>Available Bikes: 12</br>Number of Docks: 25</br> View more information about <a href="/node/2982">this dock</a>']

];

function setMarkers(map, locations) {

      var image1 = new google.maps.MarkerImage('amber-spot.png',
      new google.maps.Size(30, 36),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));

  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  var bounds = new google.maps.LatLngBounds();  
  for (var i = 0; i < locations.length; i++) {
    var spot = locations[i];
    var myLatLng = new google.maps.LatLng(spot[1], spot[2]);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: spot[3],
        title: spot[0],
        zIndex: spot[4],
        html: spot[5]
    });
    bounds.extend(myLatLng);
    map.fitBounds(bounds);  
    var infowindow = new google.maps.InfoWindow({
});

    google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(this.html);
    infowindow.open(map,this);
});
  }
}

感谢

利

Answer 1

首先，您需要一个javascript函数，该函数将通过按下按钮或链接点击来触发。此函数将使用通过html5提供的geolocation api来检查用户是否可以为您提供他们的位置并获取它（如果是这样）。该函数的其余部分将使用google maps api平移到该lat lng坐标并适当设置缩放级别。

这是google maps api map对象，它包含您需要的方法： http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

此网站基本上概述了您要做的所有事情： http://www.html5laboratory.com/geolocation.php

最后不要忘记保存数据库或客户端javascript数组中的位置。如果您要保存数据，请提醒用户注意隐私问题。

使用iPhone位置更新谷歌地图

1 个答案: