如何在用户位置的Google地图中添加标记？

Question

我目前有一张地图，上面有一个所需位置的标记。我现在希望当用户分享他们的位置时，标记将被添加到谷歌地图（然后我计划使用它来计算它们之间的路线，但现在不行）。我将在下面添加我的相关代码，因为我在分享我的位置时没有将标记添加到地图中。

JSLint错误：https://gyazo.com/78c773119fee621fead77df0fcb81a5b

非常感谢任何帮助。谢谢。

HTML：

<div id="map">
</div>

JS：

function initMap() {
    var chestersLoc = {lat: 52.19147365, lng: -2.21880075},
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: chestersLoc
        });
    var marker = new google.maps.Marker({
            position: chestersLoc,
            map: map
        });
}

var showPosition = function(position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
        marker = new google.maps.Marker({
            position: userLatLng,
            title: 'Your Location',
            draggable: true,
            map: map
        });

}

navigator.geolocation.getCurrentPosition(showPosition);

Answer 1

修改

我在这里创建了一个包含代码更新的JSfiddle：https://jsfiddle.net/iamjpg/b6rv7Lc1/1/

// Map instance
var map;

// Markers array so map can show both markers with best view.
var markers = [];

// Init map
var initMap = function() {
  var chestersLoc = {
    lat: 52.19147365,
    lng: -2.21880075
  };
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: chestersLoc
  });
  var marker = new google.maps.Marker({
    position: chestersLoc,
    map: map
  });

  // Push marker to array
  markers.push(marker);
}

// Show the users position
var showPosition = function(position) {
  var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var marker = new google.maps.Marker({
    position: userLatLng,
    title: 'Your Location',
    draggable: true,
    map: map
  });

  // Push marker to array
  markers.push(marker);

  // Create bounds object, loop over markers, set best map view.
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    bounds.extend(markers[i].getPosition());
  }

  // Set best map view for markers.
  map.fitBounds(bounds);
}

function errorHandler(error) {
  console.log('Geolocation error : code ' + error.code + ' - ' + error.message);
}

initMap();

navigator.geolocation.getCurrentPosition(showPosition, errorHandler, {
  enableHighAccuracy: false,
  maximumAge: 60000,
  timeout: 27000
});

------旧帖子-----

我建议您对代码进行以下更改 - 如果navigator.geolocation.getCurrentPosition（）不起作用，则会返回错误消息：

function errorHandler(error) {
  console.log('Geolocation error : code ' + error.code + ' - ' + error.message);
}

navigator.geolocation.getCurrentPosition(showPosition, errorHandler, {
  enableHighAccuracy: false,
  maximumAge: 60000,
  timeout: 27000
});

例如，在Chrome中，如果您的网站在http投放，并且您使用https获取Google地图，则可能会出现问题 - 有关此处的更多信息：https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only

Answer 2

确保调用initMap

为地图ID指定适当的样式

 <div id="map" dtyle="width: 400px; height: 400px;></div>

在窗口级别声明地图

var map;  

function initMap() {
    var chestersLoc = {lat: 52.19147365, lng: -2.21880075},
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: chestersLoc
        });
    var marker = new google.maps.Marker({
            position: chestersLoc,
            map: map
        });
}

var showPosition = function(position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, 
                              position.coords.longitude);
       var  marker = new google.maps.Marker({
            position: userLatLng,
            title: 'Your Location',
            draggable: true,
            map: map
        });
       map.setCenter(marker.getPosition());

}



// ***** assuming you have a callbak for initMap  
// ***** otherwise uncomment the line below
// google.maps.event.addDomListener(window, 'load', initialize);

navigator.geolocation.getCurrentPosition(showPosition);