2016-09-05 3 views
-2

ajax 호출을 사용하여 Google지도에서 마커를 동적으로 설정해야합니다. 어떻게 가능합니까?ajax를 사용하여 Google지도에서 마커를 설정하는 방법은 무엇입니까?

코드 코드가 필요합니다.

Google지도를 업데이트하려면 ajax 호출을 원합니다.

업데이트는 동적으로 아약스

var locations = [['spain',-41.054502,160.136719,'Uk',35.666222 ,39.019184],['china',58.025555,87.714844,'United Stat',35.666222 ,-44.472656],['Hong Kong',62.057586,44.121094,'United Stat',12.801088,18.457031],['Hong Kong',40.4523,102.128906,'United Stat',35.666222 ,-70.472656],['Hong Kong',28.526622,-76.816406,'United Stat',35.666222 ,-65.472656],['Hong Kong',28.526622,-76.816406,'United Stat',35.666222 ,-40.472656],['Hong Kong',28.526622,-45.816406,'United Stat',35.666222 ,-44.472656],['Hong Kong',28.526622,-24.816406,'United Stat',35.666222 ,-44.472656],['Hong Kong',28.526622,-76.816406,'United Stat',35.666222 ,-44.472656],['Hong Kong',28.526622,-76.816406,'United Stat',35.666222 ,-44.472656]]; 
function initialize() { 
var styledMapType = new google.maps.StyledMapType( 
[ 
{ 
"featureType": "all", 
"elementType": "labels.text.fill", 
"stylers": [ 
{ 
"saturation": 36 
}, 
{ 
"color": "#ffffff" 
}, 
{ 
"lightness": 40 
} 
] 
}, 
{ 
"featureType": "all", 
"elementType": "labels.text.stroke", 
"stylers": [ 
{ 
"visibility": "on" 
}, 
{ 
"color": "#000000" 
}, 
{ 
"lightness": 16 
} 
] 
}, 
{ 
"featureType": "all", 
"elementType": "labels.icon", 
"stylers": [ 
{ 
"visibility": "off" 
} 
] 
}, 
{ 
"featureType": "administrative", 
"elementType": "geometry.fill", 
"stylers": [ 
{ 
"color": "#ffffff" 
}, 
{ 
"lightness": 20 
} 
] 
}, 
{ 
"featureType": "administrative", 
"elementType": "geometry.stroke", 
"stylers": [ 
{ 
"color": "#ffffff" 
}, 
{ 
"lightness": 17 
}, 
{ 
"weight": 1.2 
} 
] 
}, 
{ 
"featureType": "landscape", 
"elementType": "geometry", 
"stylers": [ 
{ 
"color": "#000000" 
}, 
{ 
"lightness": 20 
} 
] 
}, 
{ 
"featureType": "poi", 
"elementType": "geometry", 
"stylers": [ 
{ 
"color": "#ffffff" 
}, 
{ 
"lightness": 21 
} 
] 
}, 
{ 
"featureType": "road.highway", 
"elementType": "geometry.fill", 
"stylers": [ 
{ 
"color": "#000000" 
}, 
{ 
"lightness": 17 
} 
] 
}, 
{ 
"featureType": "road.highway", 
"elementType": "geometry.stroke", 
"stylers": [ 
{ 
"color": "#000000" 
}, 
{ 
"lightness": 29 
}, 
{ 
"weight": 0.2 
} 
] 
}, 
{ 
"featureType": "road.arterial", 
"elementType": "geometry", 
"stylers": [ 
{ 
"color": "#000000" 
}, 
{ 
"lightness": 18 
} 
] 
}, 
{ 
"featureType": "road.local", 

를 사용하여 마커 난 당신이 뭔가를해야 업데이트 마커

+0

이 코드 작성 서비스가 아니며에 같이 위도-LNG 객체를 반환 fakeAjaxCall 함수를 호출하고있다. pls는 귀하가 시도한 것을 제공하며 문제를 해결하는 데 도움을 줄 수 있습니다. – Iceman

답변

1

이 코드를 사용했다. 난 당신이 만들고 싶어 아약스 호출을 알 수 없기 때문에 나는 그것을 조롱하고 나는 예를

//This is the fake ajax call we are supposed to call 
var fakeAjaxCall = function(success, error) { 
    var response = {lat: 59.327, lng: 18.067}; 
    window.setTimeout(success.bind(null, response), 1000); 
} 

//Our map object is already initialized, no marker is there yet. 
var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 13, 
    center: {lat: 59.325, lng: 18.070} 
}); 

//Here we make the ajax call. We expect a lat-lng response like the one from fake ajax call 
fakeAjaxCall(function success(responseMarker){ 
    var marker = new google.maps.Marker({ 
    position: responseMarker, 
    map: map, 
    title: 'Hello World!' 
    }); 
}) 
관련 문제