Html 如何将我的位置按钮添加到谷歌地图

我想把我的位置按钮添加到我的地图上，就像真正的谷歌地图一样。 我尝试了一些插件，但他们没有位置按钮，我该怎么办？ 下面是我使用的一个插件：

var映射选项={
缩放：17，
中心：新google.maps.LatLng（-34.397150.644），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
var GeoMarker=新地理定位标记（地图）对于web浏览器，您可以使用html5内置的地理位置来获取您的位置：您可以遵循以下文档：

但是，如果浏览器不支持地理位置，请首先设置默认位置

var myLocation = {lat: -34.397, lng: 150.644};

之后，在init函数中，您可以获得如下位置：

if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function(position) {

      myLocation.lat = position.coords.latitude;
      myLocation.lng = position.coords.longitude;
      map.setCenter(myLocation);

      }, function() {
      handleLocationError(true, map.getCenter());
   });
} else {
   // Browser doesn't support Geolocation
   handleLocationError(false, map.getCenter());
}

将位置坐标设置为地图的默认中心

map = new google.maps.Map(document.getElementById('map'), {
   zoom: 17,
   center: myLocation,
   mapTypeId: 'roadmap'
});

然后，如果您想返回您的位置，只需调用此函数

function goToMyLocation() {
  map.setCenter(myLocation);
}

检查此工作示例：

下面是代码片段


var映射；
var btnLocation=document.getElementById（“btn位置”）；
变量位置={
lat:-34.397，
液化天然气：150.644
};
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：17，
中心：myLocation，
mapTypeId:“路线图”
});
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
myLocation.lat=位置坐标纬度；
myLocation.lng=位置.坐标.经度；
//我刚刚添加了一个标记让你确认你的位置
var marker=new google.maps.marker({
位置：myLocation，
地图：地图
});
地图设置中心（myLocation）；
}，函数（）{
handleLocationError（true，map.getCenter（））；
});
}否则{
//浏览器不支持地理位置
handleLocationError（false，map.getCenter（））；
}
}
功能手柄位置错误（浏览器具有地理位置、信息窗口、pos）{
console.log（browserHasGeolocation？
“错误：地理位置服务失败。”：
'错误：您的浏览器不支持地理位置。'）；
}
btnLocation.addEventListener（'click'，function（）{
goToMyLocation（）；
});
函数goToMyLocation（）{
地图设置中心（myLocation）；
}
#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#基站位置{
位置：绝对位置；
右：20px；
顶部：20px；
z指数：1；
填充：20px；
边界：无；
边界半径：4px；
背景色：rgba（255、255、255、0.8）；
过渡：0.5s；
}
#btn位置：悬停{
背景色：rgba（0,0,0,1）；
颜色：白色；
光标：指针；
}

位置
去我的住处

#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#基站位置{
位置：绝对位置；
右：20px；
顶部：20px；
z指数：1；
填充：20px；
边界：无；
边界半径：4px；
背景色：rgba（255、255、255、0.8）；
过渡：0.5s；
}
#btn位置：悬停{
背景色：rgba（0,0,0,1）；
颜色：白色；
光标：指针；
}


位置
去我的住处
你的意思是在地图上的某个位置放置一个标记吗？如果是，请阅读此文档：我的意思是，就像手机上的谷歌地图一样，添加一个按钮，单击后跳转到我的位置
var btnLocation = document.getElementById("btn-location");
var myLocation = {
  lat: -34.397,
  lng: 150.644
};

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: myLocation,
    mapTypeId: 'roadmap'
  });

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {

      myLocation.lat = position.coords.latitude;
      myLocation.lng = position.coords.longitude;

      // I just added a marker for you to verify your location
      var marker = new google.maps.Marker({
        position: myLocation,
        map: map
      });

      map.setCenter(myLocation);
    }, function() {
      handleLocationError(true, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  console.log(browserHasGeolocation ?
    'Error: The Geolocation service failed.' :
    'Error: Your browser doesn\'t support geolocation.');
}


btnLocation.addEventListener('click', function() {
  goToMyLocation();
});

function goToMyLocation() {
  map.setCenter(myLocation);
}