2016-09-05 15 views
-2

ajax呼び出しを使用して、Googleマップでマーカーを動的に設定する必要があります。 どうすればいいですかajaxを使用してGoogleマップにマーカーを設定するにはどうすればよいですか?

私はそのためのコードコードが必要です。

Googleマップを更新するためのajax呼び出しが必要です。

更新が動的に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

これはコード書き込みサービスではありませんに示すように緯度経度オブジェクトを返すfakeAjaxCall関数を呼び出しています。 plsはあなたが試したものを提供し、トラブルシューティングに役立てることができます。 – Iceman

答えて

1

ためにこのコードを使用していました。私はあなたが作りたいAJAX呼び出しを知らないので、私はそれを嘲笑し、私は例

//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!' 
    }); 
}) 
関連する問題