谷歌地图 api 中心在我的位置上有一个按钮答案

【问题标题】：google maps api center on my location with a button谷歌地图 api 中心在我的位置上有一个按钮
【发布时间】：2014-11-28 15:33:53
【问题描述】：

一切正常，但我真的很喜欢最后一个按钮（GPS）（抱歉无法发布图片）将地图以用户位置为中心，而不是像我目前设置的那样仅刷新地图。

这个工作原理的一个例子是，用户打开网页并在地图上滚动，可能会更改为卫星视图，然后能够点击上面的按钮（或任何按钮）并获得地图平移回他们的位置。不确定这是否可能，但我似乎无法自己弄清楚。很感谢任何形式的帮助。这是我的弗兰肯斯坦地图的链接。 http://deepfrogphoto.com/Brett-Pelletier-Photography/Links/maps/wasatch-ski-map-mobile.htm

var map, GeoMarker;      

    function toggleLayer(this_layer){
  if(this_layer.getMap()) {
    this_layer.setMap(null)
  } else {
    this_layer.setMap(map);}}

      function initialize() {
    var mapOptions = {
      zoom: 20,
      center: new google.maps.LatLng(40.563855, -111.675426),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

    GeoMarker = new GeolocationMarker();
    GeoMarker.setCircleOptions({fillColor: '#808080'});

    google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
      map.setCenter(this.getPosition());
      map.fitBounds(this.getBounds());
    });

    google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
      alert('There was an error obtaining your position. Message: ' + e.message);
    });

    GeoMarker.setMap(map);

     trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map); 

    layer1 = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "skilines",
    from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7",
    where: ""
  },
  options: {
    styleId: 2,
    templateId: 2
  }
});   

layer2 = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "resorts",
    from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5",
    where: ""
  },
  options: {
    styleId: 2,
    templateId: 2
  }
});      

 layer3 = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "summerhiking",
    from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr",
    where: ""
  },
  options: {
    styleId: 2,
    templateId: 2
  }
});       

layer4 = new google.maps.KmlLayer('URL-to-KML.kml',
              {
                  suppressInfoWindows: false,
                  map: map,
                  preserveViewport: true
              });        
  }

  google.maps.event.addDomListener(window, 'load', initialize);

  if(!navigator.geolocation) {
    alert('Your browser does not support geolocation');}

//]]>
</script>

<title>Wasatch Map by deepfrogphoto</title>
</head>

<body>
<b>Wasatch Map by deepfrogphoto -</b>

<form>

<button onclick="myFunction()">Center Map on My Location</button>

</form>

<div id="map_canvas"></div>
</body>

【问题讨论】：

请在您的问题中发布（相关）代码。一旦你的页面被“修复”，你的问题将不再有上下文。
您知道坐标还是希望它自动检测任何用户位置？
对不起，就像我在这里说的很菜鸟一样。我不确定相关代码是什么......这在我的脑海中都是相关的，因为一点点错误就会把它搞砸。我认为人们可以查看我的页面链接，获取代码，并按照我发布问题的方式帮助我解决问题..

标签： html google-maps button geolocation

【解决方案1】：

添加一个带有 onclick 事件监听器的按钮

<button onclick="myFunction()">Center</button>

然后创建 myFunction 以将地图居中到用户位置

function myFunction(){
      Map.panTo(UserCords);//UserCords = user current latitude, longitude. I suppose you have them!!!
}

编辑

function myFunction(){
     if (navigator.geolocation){
         navigator.geolocation.getCurrentPosition(getPosition,showError);
     }
     else{
          alert("Geolocation is not supported by this browser.");
     }
 }

function getPosition(position)
  { 
      UserLatitude = position.coords.latitude;
      UserLongitude = position.coords.longitude;
      showPosition(UserLatitude, UserLongitude);
  }

function showPosition(userLatitude, userLongitude){
        lat= userLatitude;
        lon= userLongitude;
        latlon=new google.maps.LatLng(lat, lon);
        YourMap.panTo(latlon);
}

function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.")
      break;
    case error.TIMEOUT:
      alert("The request to get user location timed out.")
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.")
      break;
    }
  }

【讨论】：

谢谢，这似乎是我需要的，但我不知道你所说的“我想你有它们”是什么意思......当我的页面加载时，我有地理位置（蓝点）工作，但不确定这些 UserCords...
它对你有用吗？我的意思是 e.x UserCords = new google.maps.LatLng(40.563855, -111.675426)
还没有...我添加了按钮代码...并且可以看到...并添加了功能代码，但它对我不起作用....它可能是我放的地方，或者UserCords ..也许我没有它们..或者它们被称为别的东西？
检查我的编辑并复制粘贴代码并使用您的地图名称更改 YourMap（正如我在您的源代码中看到的，您的地图名称是“地图”）。所以用地图改变Yourmap，它必须玩！
哇，我真的很感谢你在这方面的帮助.. 虽然我仍然无法让它工作。我已经尝试将上面的功能代码编辑添加到我的代码中，但我没有像以前那样收到错误，但它仍然对我不起作用..按钮没有做任何事情......是吗为你工作？？你能给我一个完整的例子，所以我不质疑在哪里添加你的代码。