使用 iPhone 位置更新谷歌地图

Posted 2023-02-23

【中文标题】使用 iPhone 位置更新谷歌地图

【英文标题】：Use iPhone location to update google map

【发布时间】：2012-01-17 19:02:16

【问题描述】：

我正在建立一个自行车信息网站，并希望能够从他们的 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);
);
  

谢谢

李

【问题讨论】：

澄清一下：您希望用户使用地图跳转到您的网站，单击显示我的位置，然后您将保存他们的位置，然后将地图窗口重新定位到他们的位置？

【参考方案1】：

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

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

这个网站对您尝试做的所有事情都有一个很好的概述： http://www.html5laboratory.com/geolocation.php

最后不要忘记将位置保存在您的数据库或客户端 javascript 数组中。如果您要保存数据，请警告用户这会涉及隐私。