基于Google Map整合GIS地图
原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本人声明。否则将追究法律责任。
作者： 永恒の_☆ 地址： http://blog.csdn.net/chenghui0317/article/details/8489172
作者： 永恒の_☆ 地址： http://blog.csdn.net/chenghui0317/article/details/8489172
介绍和实现
一、 介绍
1、 Google Map 是实现 WebGIS 的新技术模式，GoogleMap 的出现降低了 web 地图服务的技术门槛，网络上嵌入 GoogleMap 各种应用随处可见。Google map api 已经给出了大量使用的接口方便调用，接下来一一介绍如何使用。
二、 实现
1、 创建地图
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script type="text/javascript">
var map;
window.onload = function(){
loadScript();
initialize();
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
function initialize() {
//声明坐标对象，默认以它为地图中心点
var myLatlng = new google.maps.LatLng(39.7, 117.1);
var myOptions = {
zoom: 5, //地图的缩放级别，数字越大，地图越详细
center: myLatlng, //指定显示地图的中心对象
mapTypeId: google.maps.MapTypeId.ROADMAP //地图类型指定为 路标
}
//创建一个新的map相当于 显示地图图层
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
2、 添加层点
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script type="text/javascript">
//显示的地图对象
var map;
//声明坐标对象，默认以它为地图中心点
var myLatlng = null;
window.onload = function(){
loadScript();
initialize();
}
//加载脚本
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
//初始化
function initialize() {
myLatlng = new google.maps.LatLng(39.84, 116.4);
var myOptions = {
zoom: 5, //地图的缩放级别，数字越大，地图越详细
center: myLatlng, //指定显示地图的中心对象
mapTypeId: google.maps.MapTypeId.ROADMAP //地图类型指定为 路标
}
//创建一个新的map相当于 显示地图图层
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
//过3秒之后加载层点显示
setTimeout(function(){
//创建好一个marker标记之后 ，并指定在哪个map 对象上面显示。
var marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!"
});
marker.setMap(map);
},"3000");
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
3、添加层-点的点击事件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script type="text/javascript">
//显示的地图对象
var map;
//声明坐标对象，默认以它为地图中心点
var myLatlng = null;
//添加一个显示具体内容的图
var infowindow = null;
window.onload = function(){
loadScript();
initialize();
}
//加载脚本
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
//初始化
function initialize() {
myLatlng = new google.maps.LatLng(39.84, 116.4);
infowindow = new google.maps.InfoWindow({content: 'content', size: new google.maps.Size(50, 50), position: myLatlng});
var myOptions = {
zoom: 5, //地图的缩放级别，数字越大，地图越详细
center: myLatlng, //指定显示地图的中心对象
mapTypeId: google.maps.MapTypeId.ROADMAP //地图类型指定为 路标
}
//创建一个新的map相当于 显示地图图层
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
//过3秒之后加载层点显示
setTimeout(function(){
//创建好一个marker标记之后 ，并指定在哪个map 对象上面显示。
var marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!",
content: "显示的具体内容~~"
});
marker.setMap(map);
//然后为这个点添加点击事件
google.maps.event.addListener(marker, 'click', function() {
alert(this.title);
});
},"3000");
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
4、添加点击层-点之后的层介绍
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script type="text/javascript">
//显示的地图对象
var map;
//声明坐标对象，默认以它为地图中心点
var myLatlng = null;
//添加一个显示具体内容的图
var infowindow = null;
window.onload = function(){
loadScript();
initialize();
}
//加载脚本
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
//初始化
function initialize() {
myLatlng = new google.maps.LatLng(39.84, 116.4);
infowindow = new google.maps.InfoWindow({content: 'content', size: new google.maps.Size(50, 50), position: myLatlng});
var myOptions = {
zoom: 5, //地图的缩放级别，数字越大，地图越详细
center: myLatlng, //指定显示地图的中心对象
mapTypeId: google.maps.MapTypeId.ROADMAP //地图类型指定为 路标
}
//创建一个新的map相当于 显示地图图层
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
//过3秒之后加载层点显示
setTimeout(function(){
//创建好一个marker标记之后 ，并指定在哪个map 对象上面显示。
var marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!",
content: "显示的具体内容~~"
});
marker.setMap(map);
//然后为这个点添加点击事件
google.maps.event.addListener(marker, 'click', function() {
infowindow.content = this.content;
infowindow.size = new google.maps.Size(75, 75);
infowindow.position = this.position;
infowindow.open(map);
});
},"3000");
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
5、根据地址计算出坐标
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script src=" http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript"></script>
<script type="text/javascript">
var geocoder = null;
window.onload = function(){
initialize();
showAddress("湖北荆州");
}
function initialize(){
geocoder = new GClientGeocoder();
}
function showAddress(adress) {
geocoder.getLatLng(adress,function(point) {
if(point != null){
var addr = point.toString().replace("(","").replace(")","").split(", ");
alert("经度：" + addr[0] + "纬度：" + addr[1]);
}
});
}
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
6、手动添加地图标记，然后显示对应的层点信息
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script src=" http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript"></script>
<script type="text/javascript">
//显示的地图对象
var map;
//声明坐标对象，默认以它为地图中心点
var myLatlng = null;
//添加一个显示具体内容的图
var infowindow = null;
var geocoder = null;
window.onload = function(){
loadScript();
initialize();
}
//加载脚本
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
//初始化
function initialize() {
myLatlng = new google.maps.LatLng(39.84, 116.4);
infowindow = new google.maps.InfoWindow({
content: 'content',
size: new google.maps.Size(50, 50),
position: myLatlng
});
var myOptions = {
zoom: 5, //地图的缩放级别，数字越大，地图越详细
center: myLatlng, //指定显示地图的中心对象
mapTypeId: google.maps.MapTypeId.ROADMAP //地图类型指定为 路标
}
geocoder = new GClientGeocoder();
//创建一个新的map相当于 显示地图图层
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//为地图的每一个点都添加点击事件，触发后添加层点标记，然后显示坐标
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
//手动添加层点标记
function placeMarker(point) {
//根据坐标获取 地址
var addr = point.toString().replace("(","").replace(")","").split(", ");
geocoder.getLocations(addr[0]+","+addr[1], function(location){
if(location.Status.code==200){
var marker = new google.maps.Marker({
position: point,
title:location.Placemark[0].address,
content:"地址："+location.Placemark[0].address+"<br/>坐标："+point,
map: map
});
map.setCenter(point); //居中显示
//添加点击事件
google.maps.event.addListener(marker, 'click', function() {
infowindow.content = this.content;
infowindow.size = new google.maps.Size(275, 275);
infowindow.position = this.position;
infowindow.open(map);
});
}
});
}
//过3秒之后加载层点显示
setTimeout(function(){
//创建好一个marker标记之后 ，并指定在哪个map 对象上面显示。
var marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!",
content: "显示的具体内容~~"
});
marker.setMap(map);
//然后为这个点添加点击事件
google.maps.event.addListener(marker, 'click', function() {
infowindow.content = this.content;
infowindow.size = new google.maps.Size(275, 275);
infowindow.position = this.position;
infowindow.open(map);
});
},"3000");
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>