结合地理位置和标记使用谷歌地图Javascript

Combine Geolocation and markers using Google Maps Javascript

本文关键字：谷歌地图 Javascript 地理位置 结合      更新时间：2023-09-26

我正在尝试创建一个地图，显示您当前的位置，并显示在城市中的标记。这样你就可以看到你是否在一个标记附近。

我必须在这个时候编码，我需要把它们组合起来。但当我这么做的时候，密码就失效了。有人知道怎么把这两个JS结合起来吗?如果没有，还有其他方法吗?

这是用于地理定位的JS: 

function initMap() 
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 14,
});
var infoWindow = new google.maps.InfoWindow({map: map});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };
  infoWindow.setPosition(pos);
  infoWindow.setContent('Location found.');
  map.setCenter(pos);
}, function() {
  handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
                    'Error: The Geolocation service failed.' :
                    'Error: Your browser doesn''t support geolocation.');
}

这是我为标记做的JS代码:

google.maps.event.addDomListener(window, 'load', initialize);
var map;
var currentPage = 'mapA';
var markers = [
['Thuis',52.2203713,6.90032999999994],
['Bommelstein',52.22254299999999,6.911623800000029],
['Saxion', 52.21976009999999,6.889364500000056],
['Kroeg', 52.2206085,6.896547300000066],
['t Gat', 52.2211657,6.895848999999998],
['studieruimte de Bul', 52.22101940903001,6.8924690438436755]
];
function initialize() {
var mapOptions = {
    zoom: 14,
    disableDoubleClickZoom: true,
    draggable: true,
    panControl: false,
    scrollwheel: true,
    zoomControl: true,
    streetViewControl: false,
    overviewMapControl: false,
    mapTypeControl: false,
    center: new google.maps.LatLng(51.489031, 7.039671)
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
setMarkers();}function setMarkers(){
for (i = 0; i < markers.length; i++) {
    var post = new google.maps.LatLng(markers[i][1], markers[i][2]);
    var marker = new google.maps.Marker({
        position: post,
        map: map
    });
    var infowindow = new google.maps.InfoWindow({
        content: markers[i][0]
    });
    infowindow.open(map,marker);
}
}

我实际上正在做同样的事情，直到几分钟前才遇到同样的问题。我只是在声明地图对象之前启动地理位置条件来查找位置，它为我工作了。下面是我的简单代码，类似于你的:

function initMap() {
   // Try HTML5 geolocation.
   if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function(position) {
           var currentpos = {
               lat: position.coords.latitude,
               lng: position.coords.longitude
           };
           var map = new google.maps.Map(document.getElementById('map'), {
               center: currentpos,
               zoom: 14,
           });
           var contentString = 'I found you';
           var infowindow = new google.maps.InfoWindow({
               content: contentString
           });
           var marker = new google.maps.Marker({
                position: pos,
                map: map,
                title: 'marker with infoWindow'
           });
           marker.addListener('click', function() {
               infowindow.open(map, marker);
          });
      }, function() {
           handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
    }
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn''t support geolocation.');
}

祝你好运

相关文章：