Javascript 我无法将数据从web服务返回到google地图并创建标记
其想法是在谷歌地图中创建标记,这些标记包含数据(纬度和经度)。 当我从ajax调用web服务时,GoogleMaps只加载并显示一个没有任何标记的空地图。问题在哪里Javascript 我无法将数据从web服务返回到google地图并创建标记,javascript,jquery,ajax,web-services,google-maps-markers,Javascript,Jquery,Ajax,Web Services,Google Maps Markers,其想法是在谷歌地图中创建标记,这些标记包含数据(纬度和经度)。 当我从ajax调用web服务时,GoogleMaps只加载并显示一个没有任何标记的空地图。问题在哪里 <script> function initialize() { var latitude = 38.58; var longitude = 23.65; var radius = 8000; var center = new google
<script>
function initialize()
{
var latitude = 38.58;
var longitude = 23.65;
var radius = 8000;
var center = new google.maps.LatLng(latitude, longitude);
var bounds = new google.maps.Circle(
{
center: center, radius: radius
}).getBounds();
var mapOptions =
{
center: center,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
setMarkers(center, radius, map);
}
function setMarkers(center, radius, map)
{
var jsonString = (function ()
{
var json = null;
$.ajax({
url : 'WebServiceTest.asmx/convertDataTabletoString',
contentType: 'application/json; charset = utf-8',
method: 'get',
dataType: "json",
success: function (data)
{
json = data;
},
error : function(err)
{
alert(err);
}
});
return jsonString;
})();
var circle = new google.maps.Circle({
strokeColor: '#000000',
strokeOpacity: 0.25,
strokeWeight: 1.0,
fillColor: '#ffffff',
fillOpacity: 0.1,
clickable: false,
map: map,
center: center,
radius: radius
});
var bounds = circle.getBounds();
for (i in jsonString) {
var data = jsonString[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
infoBox(map, marker, data);
}
}
function infoBox(map, marker, data) {
var infoWindow = new google.maps.InfoWindow();
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.STREET);
infoWindow.open(map, marker);
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.STREET);
infoWindow.open(map, marker);
});
})(marker, data);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
函数初始化()
{
var纬度=38.58;
var经度=23.65;
var半径=8000;
var center=new google.maps.LatLng(纬度、经度);
var bounds=new google.maps.Circle(
{
中心:中心,半径:半径
}).getBounds();
变量映射选项=
{
中心:中心,,
缩放:9,
mapTypeId:google.maps.mapTypeId.ROADMAP,
滚轮:错误
};
var map=new google.maps.map(document.getElementById(“地图画布”),mapOptions);
设置标记(中心、半径、地图);
}
功能设置标记(中心、半径、地图)
{
var jsonString=(函数()
{
var=null;
$.ajax({
url:'WebServiceTest.asmx/convertDataTabletoString',
contentType:'application/json;charset=utf-8',
方法:“get”,
数据类型:“json”,
成功:功能(数据)
{
json=数据;
},
错误:函数(err)
{
警惕(err);
}
});
返回jsonString;
})();
var circle=new google.maps.circle({
strokeColor:“#000000”,
笔划不透明度:0.25,
冲程重量:1.0,
填充颜色:'#ffffff',
填充不透明度:0.1,
可点击:false,
地图:地图,
中心:中心,,
半径:半径
});
var bounds=circle.getBounds();
for(jsonString中的i){
var data=jsonString[i],
latLng=新的google.maps.latLng(data.lat,data.lng);
var marker=new google.maps.marker({
位置:latLng,
地图:地图,
标题:data.title
});
信息盒(地图、标记、数据);
}
}
功能信息框(地图、标记、数据){
var infoWindow=new google.maps.infoWindow();
//将单击事件附加到当前标记
google.maps.event.addListener(标记“单击”,函数(e){
infoWindow.setContent(data.STREET);
信息窗口。打开(地图、标记);
});
(功能(标记、数据){
google.maps.event.addListener(标记“单击”,函数(e){
infoWindow.setContent(data.STREET);
信息窗口。打开(地图、标记);
});
})(标记、数据);
}
google.maps.event.addDomListener(窗口“加载”,初始化);
使用命令可以更快地实现这一点。此命令用于解析以Json格式返回的数据。
将parseJson命令和谷歌提供的一些知识结合起来,可以得到理想的结果。
链接中提供了代码示例 从web服务返回的所有数据都序列化为JSON。