0
我正在嘗試構建一個使用Google Map API顯示服務器數據的Web應用程序。它工作正常,但我需要刷新頁面以使用標記填充地圖。Google地圖不顯示標記
這裏是我的代碼如下所示:
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);
}
});
}
控制檯顯示其從服務器獲取數據,但由於某種原因,它不會在第一頁加載添加任何標記。可能是什麼原因?
所以不會添加第二頁面加載? –
它很隨機地添加標記。有時候,我必須更新頁面1次,有時候更多地將標記放到地圖上。 – user2210792