0

サーバーからのデータを表示するために Google Map API を使用する Web アプリケーションを構築しようとしています。正常に動作しますが、ページを更新してマップにマーカーを追加する必要があります。

私のコードは次のようになります。

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);
    }
  });
}

コンソールは、サーバーからデータを取得していることを示していますが、何らかの理由で、最初のページの読み込み時にマーカーを追加しません。その理由は何ですか？

4

1 に答える 1

1

これを試して

google.maps.event.addListenerOnce(map, 'idle', function(){
    getLocations();
});
于 2013-04-18T09:56:30.987 に答える