Javascript 如何在此谷歌地图上启用地理定位？

我想知道如何在这个谷歌地图片段上启用地理定位

<input id="pac-input" class="controls" type="text"
    placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
  <span id="place-name"  class="title"></span><br>
  Place ID <span id="place-id"></span><br>
  <span id="place-address"></span>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap"
        async defer></script>

地点ID

//此示例使用Place Autocomplete小部件允许用户搜索
//查找并选择一个位置。然后，该示例显示一个信息窗口，其中包含
//用户拥有的地点ID和有关该地点的其他信息
//选中。
//此示例需要Places库。包括图书馆=地方
//第一次加载API时的参数。例如：
// 
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:48.137260，lng:11.574850}，
缩放：13
});
var input=document.getElementById（'pac-input'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
autocomplete.bindTo（'bounds'，map）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
var infowindow=new google.maps.infowindow（）；
var infowindowContent=document.getElementById（'infowindow-content'）；
setContent（infowindowContent）；
var marker=new google.maps.marker({
地图：地图
});
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});
autocomplete.addListener（'place\u changed'，function（）{
infowindow.close（）；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
返回；
}
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；
}
//使用位置ID和位置设置标记的位置。
标记。设定地点({
地点id:place.place\u id，
位置：place.geometry.location
});
marker.setVisible（true）；
infowindowContent.children['place-name'].textContent=place.name；
infowindowContent.children['place-id'].textContent=place.place\u id；
infowindowContent.children['place-address'].textContent=
place.u地址；
信息窗口。打开（地图、标记）；
});
}

这是GoogleMapsGeolocation的参考，但由于我对js还是很陌生，所以我无法在上面有搜索功能的代码上实现该代码

谢谢

这是答案

// This sample uses the Place Autocomplete widget to allow the user to search
// for and select a place. The sample then displays an info window containing
// the place ID and other information about the place that the user has
// selected.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'));

  navigator.geolocation.getCurrentPosition(function(position) {
    // Center on user's current location if geolocation prompt allowed
    var initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(initialLocation);
    map.setZoom(13);
  }, function(positionError) {
    // User denied geolocation prompt - default to Chicago
    map.setCenter(new google.maps.LatLng(39.8097343, -98.5556199));
    map.setZoom(13);
  });

  var input = document.getElementById('pac-input');

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var infowindow = new google.maps.InfoWindow();
  var infowindowContent = document.getElementById('infowindow-content');
  infowindow.setContent(infowindowContent);
  var marker = new google.maps.Marker({
    map: map
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }

    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }

    // Set the position of the marker using the place ID and location.
    marker.setPlace({
      placeId: place.place_id,
      location: place.geometry.location
    });
    marker.setVisible(true);

    infowindowContent.children['place-name'].textContent = place.name;
    infowindowContent.children['place-id'].textContent = place.place_id;
    infowindowContent.children['place-address'].textContent =
        place.formatted_address;
    infowindow.open(map, marker);

     placeid = place.place_id;
  });


}

//此示例使用Place Autocomplete小部件允许用户搜索
//查找并选择一个位置。然后，该示例显示一个信息窗口，其中包含
//用户拥有的地点ID和有关该地点的其他信息
//选中。
//此示例需要Places库。包括图书馆=地方
//第一次加载API时的参数。例如：
// 
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）；
navigator.geolocation.getCurrentPosition（函数（位置）{
//如果允许地理位置提示，则以用户当前位置为中心
var initialLocation=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
地图设置中心（初始位置）；
map.setZoom（13）；
}，函数（位置错误）{
//用户拒绝地理位置提示-默认为Chicago
map.setCenter（新的google.maps.LatLng（39.8097343，-98.5556199））；
map.setZoom（13）；
});
var input=document.getElementById（'pac-input'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
autocomplete.bindTo（'bounds'，map）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
var infowindow=new google.maps.infowindow（）；
var infowindowContent=document.getElementById（'infowindow-content'）；
setContent（infowindowContent）；
var marker=new google.maps.marker({
地图：地图
});
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});
autocomplete.addListener（'place\u changed'，function（）{
infowindow.close（）；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
返回；
}
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；
}
//使用位置ID和位置设置标记的位置。
标记。设定地点({
地点id:place.place\u id，
位置：place.geometry.location
});
marker.setVisible（true）；
infowindowContent.children['place-name'].textContent=place.name；
infowindowContent.children['place-id'].textContent=place.place\u id；
infowindowContent.children['place-address'].textContent=
place.u地址；
信息窗口。打开（地图、标记）；
placeid=place.place\u id；
});
}

地点ID

---

即使您是JS新手，该网站也不是免费的编码服务。您可能需要学习JS基础知识，+我没有看到您在问题中发布的代码中试图将这两个代码片段连接在一起。提示：infowindow和map变量需要在全局范围内，就像您试图将这两个脚本连接在一起时发布的第一个fiddle链接一样，因为它们在

handleLocationError

函数中使用。很抱歉，我做了更多的研究并亲自完成了。。稍后将发布我的答案。如果您想获得问题的答案和帮助，最好是为您的问题添加质量，并从较高的层次解释您的代码片段，（1）您希望实现什么，（2）您为此做了什么，（3）出了什么问题。人们太忙了，无法深入研究如此混乱的代码或其他人的问题。

// This sample uses the Place Autocomplete widget to allow the user to search
// for and select a place. The sample then displays an info window containing
// the place ID and other information about the place that the user has
// selected.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'));

  navigator.geolocation.getCurrentPosition(function(position) {
    // Center on user's current location if geolocation prompt allowed
    var initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(initialLocation);
    map.setZoom(13);
  }, function(positionError) {
    // User denied geolocation prompt - default to Chicago
    map.setCenter(new google.maps.LatLng(39.8097343, -98.5556199));
    map.setZoom(13);
  });

  var input = document.getElementById('pac-input');

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var infowindow = new google.maps.InfoWindow();
  var infowindowContent = document.getElementById('infowindow-content');
  infowindow.setContent(infowindowContent);
  var marker = new google.maps.Marker({
    map: map
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }

    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }

    // Set the position of the marker using the place ID and location.
    marker.setPlace({
      placeId: place.place_id,
      location: place.geometry.location
    });
    marker.setVisible(true);

    infowindowContent.children['place-name'].textContent = place.name;
    infowindowContent.children['place-id'].textContent = place.place_id;
    infowindowContent.children['place-address'].textContent =
        place.formatted_address;
    infowindow.open(map, marker);

     placeid = place.place_id;
  });


}

<meta name="referrer" content="never">
<meta name="referrer" content="no-referrer">

<input id="pac-input" class="controls" type="text"
    placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
  <span id="place-name"  class="title"></span><br>
  Place ID <span id="place-id"></span><br>
  <span id="place-address"></span>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap"
        async defer></script>