Question

我正在尝试构建一个使用Google Map API来显示服务器数据的webapp。它工作正常但我需要刷新页面以使用标记填充地图。

以下是我的代码：

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
latitude=1;
longitude=1;

var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];



$(document).ready(function() {

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    coords = new google.maps.LatLng(latitude, longitude);
    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});

    var mapOptions = {
        zoom: 15,
        center: coords,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        disableDefaultUI: true,
         styles: styles,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
        directionsDisplay.setMap(map);
        var image = 'mapmarker.png';

        var marker = new google.maps.Marker({
                position: coords,
                map: map,
                icon: image,
                title: "Your current location!"
        });

    });
}else {
    alert("Geolocation API is not supported in your browser.");
}


getLocations();


function getLocations() {
    $.getJSON("fromMyServer", function (json) {

        var location;
        $.each(json.key, function (i, item) {
            addMarker(item.lat,item.lng, item.name, item.address);

            var tiedot = item.Nimi;
        });

    });
}

var markersArray;


function addMarker(lat,lng,name,address) {

  var contentString = '<h3>'+name + '</h3>'+ address;

  var tiedot = contentString + '<br><button onclick="calcRoute('+lat+','+lng+')">get route</button> '

        var Marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            map: map,
            title:"Test"
        });


         google.maps.event.addListener(Marker, 'click', function() {
          $('.tiedot').empty();
          $('.tiedot').append('<p>'+tiedot+'</p>');
          $("#panel").slideDown("slow");
             //infowindow.open(map,this);

    });

}



});
function calcRoute(lat,lng) {

  var start = latitude+','+longitude;

  var end = lat+','+lng;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

控制台显示它从服务器获取数据，但由于某种原因，它不会在第一页加载时添加任何标记。可能是什么原因？

Answer 1

试试这个

google.maps.event.addListenerOnce(map, 'idle', function(){
    getLocations();
});

Google地图不会显示标记

1 个答案: