用Ajax加载Google地图并向地图上添加标注信息

来源：互联网发布：linux cat命令详解编辑：程序博客网时间：2024/04/27 04:16

　　function hello(param){

var xmlHttp;

　　　　if(window.XMLHttpRequest) { //针对高版本浏览器

　　　　　 xmlHttp = new XMLHttpRequest();

　　　　} else if(window.ActiveXObject) { //针对IE5, IE6

　　 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

　　　　}

if(xmlHttp != null) {

xmlHttp.onreadystatechange = callback;

xmlHttp.open("GET", "/gmap/org?id="+param, true);

xmlHttp.send();

           }
     }
     function callback() {

　　　　if(xmlHttp.readyState == 4){

　　if(xmlHttp.status == 200){

　　var xmlDoc = xmlHttp.responseText; //接收从服务器返回来的文本

　　var x = xmlDoc.substring(0,xmlDoc.indexOf(','));

　　var y = xmlDoc.substring(xmlDoc.indexOf(',')+1,xmlDoc.lastIndexOf(','));

　　var desc = xmlDoc.substring(xmlDoc.lastIndexOf(',')+1);

　　init(x,y,desc);

　　　　      }
          }
     }

　　function init(x,y,info) {

　　var map = new GMap2(document.getElementById("map"));

　　　　map.addControl(new GScaleControl()); //添加比例尺控件

　　　　map.addControl(new GLargeMapControl()); //添加缩放图标控件

　　　　map.addControl(new GMapTypeControl()); //添加地图类型选择控件

　　　　map.addMapType(G_PHYSICAL_MAP);                        //添加地形选项

      　 map.addControl(new GOverviewMapControl());            //添加缩略图控件
           map.enableDoubleClickZoom();                    //允许鼠标双击放大(左键)和缩小(右键)
           map.enableScrollWheelZoom();                                //允许鼠标滚轮放大和缩小
           map.enableContinuousZoom();

map.setCenter(new GLatLng(x,y), 11); 　　　 //设置地图中心的经纬度和放大系数

　　　　if(info != null) {

　　　　var point = new GLatLng(x,y); //根据指定的经纬度创建一个点

　　　 map.addOverlay(createMarker(point, info));　 //将指定的点添加到地图上　　　 }

//在指定的点上创建标注信息

function createMarker(point, info) {

　　　　 var marker = new GMarker(point);

GEvent.addListener(marker, "click", function(){

　 marker.openInfoWindowHtml("<b>" + info + "</b>");

});

return marker;

}

---------------------------------连接几点画线(Begin) -----------------------------------

var polyline=new GPolyline([new GLatLng(39.1005756949016, 117.08194255828857),

new GLatLng(39.1105756949017, 117.09194255828857),

new GLatLng(39.1205756949018, 117.08194255828857)],"red",8);

map.addOverlay(polyline);

-------------------------------地图上画行车路线和步行路线-----------------------------　　

function find(start, end, map) {

　 directionsPanel = document.getElementById("route");

　 directions = new GDirections(map, directionsPanel);

　 //驾车 travelMode : G_TRAVEL_MODE_DRIVING

　 //步行 travelMode : G_TRAVEL_MODE_WALKING

directions.load("from:" + start + "to:" + end, {travelMode : G_TRAVEL_MODE_DRIVING});

}　　

　 //调用函数 start--始发地 end--目的地 map--地图实例

　　find(new GLatLng(38.11057, 117.09194), new GLatLng(39.12057, 116.08194), map);

</script>

-----------------------------调用init函数加载Google earth---------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//xmlns正确显示地图中的折线
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

　 <script src="http://maps.google.com/maps?

file=api&v=2&sensor=false&key=ABQIAAAAMUka8spLpXK6MnIMWJ1xQRTJQa0g3IQ9GZqIMmInSLzwtGDKaBR9PZj4yw8eE_JLKfTCiOjK2pRwUA"

type="text/javascript"></script>

</head>

//route层对应find函数中的directionsPanel，用于显示具体行走路线

　 </body>

</html>