Question

第一件事是，我会告诉你我是google地图的新手，其中一些使我感到困惑。我需要做的是显示用户位置并显示适当的标记。我已经准备好了数据库，并拥有了一些Google地图。

我正在使用的是here中的一个示例。如果我使用静态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）然后出现另一个错误“ InvalidValueError：setMap：不是Map的实例；”因此在全球范围内创建了“可变地图”。已成功加载地图，但仍未加载标记。在此时调试代码' var marker = new google.maps.Marker（{... '）时，它正在迭代xml中的所有标记，但是某种程度上标记并未添加到地图中。知道原因了吗？

所以我尝试了另一种方式。请查看地图上显示的xml中的所有标记。在这里，我只是获得标记中的“ 名称”，您可能需要添加其他参数，例如 id，address 等。添加了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

在Google地图上显示用户位置

1 个答案: