用Ajax加载Google地图并向地图上添加标注信息
2010-11-11 16:10
288 查看
<script type="text/javascript">
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>系统</title>
<script src="http://maps.google.com/maps?
file=api&v=2&sensor=false&key=ABQIAAAAMUka8spLpXK6MnIMWJ1xQRTJQa0g3IQ9GZqIMmInSLzwtGDKaBR9PZj4yw8eE_JLKfTCiOjK2pRwUA"
type="text/javascript"></script>
</head>
<!--太原市的经纬度-->
<body onload="init(37.86667,112.53333,null)" onunload="GUnload()">
<div style="width:700px; height:500px;" id="map"></div>
//route层对应find函数中的directionsPanel，用于显示具体行走路线
<div id="route"></div>
</body>
</html>
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>系统</title>
<script src="http://maps.google.com/maps?
file=api&v=2&sensor=false&key=ABQIAAAAMUka8spLpXK6MnIMWJ1xQRTJQa0g3IQ9GZqIMmInSLzwtGDKaBR9PZj4yw8eE_JLKfTCiOjK2pRwUA"
type="text/javascript"></script>
</head>
<!--太原市的经纬度-->
<body onload="init(37.86667,112.53333,null)" onunload="GUnload()">
<div style="width:700px; height:500px;" id="map"></div>
//route层对应find函数中的directionsPanel，用于显示具体行走路线
<div id="route"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 读取本地XML文件信息，在地图上添加标注，显示当前位置详细地理信息
- echarts3地图如何添加点击事件？ 点击地图相应的区域ajax获取并展示本区域省下面所有市的信息
- 创建百度地图，设置地图缩放，设置标注，添加信息窗口
- ArcGIS API for JavaScript在地图上添加一个标注图标
- 【Leafletjs】6.Control.Loading推展－在地图上边框添加加载动态条
- 如何利用【百度地图API】，制作房产酒店地图？（上）——制作自定义标注和自定义信息窗口
- 如何使用百度地图API在地图上批量添加点标注
- google 地图，添加文本标注，可提交到数据库（更新，删除，修改）
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- 在地图中添加label以标注地图
- AngularJs 自定义ajax服务为请求添加加载动画
- 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注
- Flex加载google地图、百度地图以及天地图作底图
- Google map API3 标注、添加事件、地图查询
- MapObject学习笔记－第三讲 图层标注、图层控制和电子地图常用工具开发(添加经过修正与VS2005兼容的Legend控件下载)
- iOS8地图点击标注显示详细信息（医药吧数据）
- 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍
- googlemap 高德地图mapabc 图吧 显示地图，标注一个或多个poi信息点，弹出气泡显示poi点的位置信息
- 给ajax动态加载的dom节点添加鼠标事件
- 关于谷歌地图添加多标注且每个标注上显示信息窗体详解