google地图APi升级到第三版,网站的google地图引用也需要重新做,之前用的还是第一版的,还能用着也是个奇迹了。
用ashx从数据库中获取城市名称及城市经纬度,所以页面通过ashx获取的是城市名及经纬度的对应信息,用JSON格式字符串输出,用StringBuilder一块块拼出来的JSON字符串,然后是
context.Response.ContentType = "text/plain";
context.Response.Write(outputStr.ToString());输出,
HTML页面用jQuery.ajax(url,success);获取,dataType不填,如果填'json',能获取到输出但是success无法执行,因为获取的数据格式实际上是字符串,不是json格式,所以并不算成功,而不填的话会根据返回类型匹配吧,大致是这么个意思。
在JS中想用data.citys[j].name这样的JSON格式方法的话需要用JS自带的eval函数,将字符串转为JSON。
一下为ajax代码
jQuery.ajax({ url: ajaxURL, success: function(json) {
var data = eval_r("(" + json + ")");//_r新浪你妹 自动加的
var latlngArr = new Array();
var markerArr = new Array();
var latlng;
for (i = 0; i < data.citys.length; i++) {
latlng = data.citys[i].latlng;
latlngArr[i] = new google.maps.LatLng(latlng.split(',')[0], latlng.split(',')[1]);
}
var mapOptions = { zoom: 4, center: latlngArr[0], mapTypeId: google.maps.MapTypeId.ROADMAP };
var googleMap = new google.maps.Map(document.getElementByIdx_x_x_x_x(mapDivId), mapOptions);
var linePath = new google.maps.Polyline({ path: latlngArr, strokeColor: "#1b519f", strokeOpacity: 1.0, strokeWeight: 2 });
linePath.setMap(googleMap);
var image = '/template/skin/markerico.png';
for (j = 0; j < data.citys.length; j++) {
markerArr[j] = new google.maps.Marker({ position: latlngArr[j], map: googleMap, title: data.citys[j].name, icon: image });
}
}
});
获取ajax数据,success回调函数中调用google map api创建地图