时间戳

首页 > 解决方案 > 在谷歌地图上显示用户位置

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

问题描述

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

我正在使用的是这里的一个例子。如果我使用静态 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
          });         
}

标签： google-mapsgoogle-maps-markers

解决方案

a）在本地运行您的代码时，我得到'pos'未定义，所以我将以下代码' var map = new google.maps.Map（.. '移到getCurrentPosition（）{... b）然后我得到了另一个错误'InvalidValueError: setMap: not an instance of 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

推荐阅读