Question

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

＆＃13;

var mapOptions = {
  zoom: 17,
  center: new google.maps.LatLng(-34.397, 150.644),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
var GeoMarker = new GeolocationMarker(map);

＆＃13;

Answer 1

对于网络浏览器，您可以使用内置地理位置的html5来获取您的位置：您可以按照以下文档：https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

但首先设置默认位置，以防浏览器不支持Geolocation

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);
}

请查看此工作示例：https://jsbin.com/ricebu/edit?html,css,js,output

以下是代码段

＆＃13;

var map;
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);
}

＆＃13;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#btn-location {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
  padding: 20px;
  border: none;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
  transition: 0.5s;
}

#btn-location:hover {
  background-color: rgba(0, 0, 0, 1);
  color: white;
  cursor: pointer;
}

＆＃13;

<html>

<head>
  <title>Location</title>
</head>

<body>
  <button id="btn-location">Go to my Location</button>
  <div id="map"></div>
  <!-- Replace the value of the key parameter with your own API key. -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script>
</body>

</html>

＆＃13;

Answer 2

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);
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#btn-location {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
  padding: 20px;
  border: none;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
  transition: 0.5s;
}

#btn-location:hover {
  background-color: rgba(0, 0, 0, 1);
  color: white;
  cursor: pointer;
}

<html>

<head>
  <title>Location</title>
</head>

<body>
  <button id="btn-location">Go to my Location</button>
  <div id="map"></div>
  <!-- Replace the value of the key parameter with your own API key. -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script>
</body>

</html>

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

2 个答案: