在谷歌地图上显示用户位置

Question

首先，我会告诉你我是谷歌地图的新手，其中一些对我来说非常困惑。 我需要做的是显示用户位置并显示适当的标记。 我已经准备好了数据库和一些谷歌地图。

我正在使用的是这里的一个例子。如果我使用静态 LatLng，我可以获得的是标记，或者只是没有标记的用户动态位置。

需要帮助。 如果你对这篇文章投了反对票，请告诉我为什么。

我正在使用的代码可以在 https://jsfiddle.net/8q1apmdy/9/找到，并显示打击代码中我遗漏某些内容的位置，很可能很小或位置错误。

function initMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
});
var map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 12
});         
}

Answer 1

a(在本地运行代码时，我得到了未定义的"pos"，所以我将以下代码">var map = new google.maps.Map(..'移到 getCurrentPosition(({... b( 然后我得到了另一个错误"无效值错误：setMap：不是 Map 的实例";所以全局创建了一个"var map"。 已成功加载地图，但仍未加载标记。此时调试代码时，">var marker = new google.maps.Marker({..."它正在迭代来自 XML 的所有标记，但不知何故标记没有添加到地图中。还不知道原因吗？

所以我尝试了不同的方式。请查看地图上显示的xml中的所有标记。在这里，我只是在标记中获取">名称"，您可能需要添加其他参数，例如id，地址等。 添加了 JSFiddle 以供参考

var infowindow;
var map;
//var downloadUrl;
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-33.868820, 151.209290),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
downloadUrl("https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml", function(data) {
var bounds = new google.maps.LatLngBounds();
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');        
for (var i = 0; i < markers.length; i++) {
var id =  markers[i].getAttribute('id');              
var address = markers[i].getAttribute('address');
var type = markers[i].getAttribute('type');
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(latlng);
var marker = createMarker(id, markers[i].getAttribute("name"), address, latlng, type);
}//finish loop
//map.fitBounds(bounds);
}); //end downloadurl
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
}
function createMarker(id, name, address, latlng, type) {
var marker = new google.maps.Marker({
position: latlng,                               
map: map
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}

JSFiddle