Question

我目前有两个功能，一个使用输入的邮政编码在谷歌地图上放置一个标记，另一个使用输入用户的位置。

我很困惑我的意思是让用户的位置出现在地图上，有人可以帮忙吗？

谢谢！

// EDIT

目前输入的邮政编码工作正常，它会显示在具有指定位置的地图上，但是点击使用我的位置我希望使用使用用户位置的标记更新地图

//我想复制什么

//我目前拥有什么

＆＃13;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {
      lat: 53.47282,
      lng: -2.24651
    }
  });
  var geocoder = new google.maps.Geocoder();

  document.getElementById('search').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });
}

function geocodeAddress(geocoder, resultsMap) {
  var address = document.getElementById('postcode-box').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === 'OK') {
      resultsMap.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}



var getUserLocation = document.getElementById("use-location");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(location) {
      showPosition(location);
    });
  } else {
    getUserLocation.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  map.setCenter(new google.maps.LatLng(lat, lng));
}

＆＃13;

#map {
  height: 100%;
}

.button {
  background-color: black;
  padding: .5em;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  border: none;
  display: inline-block;
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

＆＃13;

<div class="container">

  <div class="Header">
    <div class="header-text">
      <h1>Find a motorcycle dealership</h1>
    </div>
    <div class="header-text header-text__sub-header-text">
      <h1>Please enter a postcode, address or location and press search to find the colest dealership.</h1>
    </div>



    <div class="postcode-lookup">
      <input id="postcode-box" type="text" class="postcode-input" placeholder="Enter Postcode" />
      <div class="button" id="search">Search</div>
      <div class="button" id="use-location" onclick="getLocation()">Use my location</div>
    </div>


  </div>



  <div class="RightCol ">
    <div id="map"></div>
  </div>

＆＃13;

Answer 1

在您的代码中，我看到您只是将地图的视点定位到用户位置。你没有做任何事来在地图上的任何地方指出位置。

您缺少一个标记来指示地图上的位置。

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  map.setCenter(new google.maps.LatLng(lat, lng));

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
  });
}

以下是Markers文档以获取更多信息，如果您想在图标中添加更多详细信息，我建议您尝试Info Windows。

Answer 2

感谢您分享完整的代码，以下是您应用的一个有效示例：https://jsbin.com/folaxih/edit?html,js,output

您错过了Franco建议的标记创建和代码中的一些范围问题，因此无法在函数中读取任何变量映射，在init映射的末尾移动函数并且应该修复，参见示例指导。

var map;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {
  lat: 53.47282,
  lng: -2.24651
}
});
var geocoder = new google.maps.Geocoder();

document.getElementById('search').addEventListener('click', 
function() {
geocodeAddress(geocoder, map);
});
document.getElementById('use-location').addEventListener('click', 
function() {
getLocation();
});
function getLocation() {
if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);

} else {
 getUserLocation.innerHTML = "Geolocation is not supported by this 
browser.";
}
}

注意：我为＆＃34; use-location＆＃34;添加了一个监听器。并取出onClick

Google将标记与用户位置对齐

2 个答案: