调用google地图
引言:
今天一个朋友问我象51job那样的地图怎样实现的,我就网上收集了大家两个简单的使用方法
A.这个非常简单,是静态的
具体参考:
http://code.google.com/intl/zh-CN/apis/maps/documentation/staticmaps/
B.这个应用非常实用,但不是很简便,是动态的
具体参考:
http://code.google.com/intl/zh-CN/apis/maps/
C.这是转自vifix的博客的谷歌地图应用
具体参考:
http://vifix.cn/blog/convert-address-to-coordinates-google-map-api.html
A.这个非常简单,是静态的
具体参考:
http://code.google.com/intl/zh-CN/apis/maps/documentation/staticmaps/
<html> <head> </head> <body> <img src='http://maps.google.com/maps/api/staticmap?center=39.9942100,116.3645000,13&zoom=14&size=512x512&maptype=roadmap &markers=color:blue|label:S|39.987889,116.350029&markers=color:green|label:G|39.9942100,116.3645000 &markers=color:red|color:red|label:C|39.987889,116.350029&sensor=false'/> </body> </html>
B.这个应用非常实用,但不是很简便,是动态的
<html>
<head>
<title>Google Map API</title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAA6vpS801yIrtuIMuUfP_1LRSxsn5a65eZaAi_5C9z2RjNFFY5KBSBb4uXgDPOoqPTKZ5RfZHQ1HTweA&sensor=true" type="text/javascript"></script>
<script type="text/javascript">
var map; //当前的地图对象
//初始化
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById('map_canvas'));
// 给地图添加内置的控件，分别为：
// 平移及缩放控件（左上角）、比例尺控件（左下角）、缩略图控件（右下角）
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
// 将视图移到点的位置
map.setCenter(new GLatLng(39.987889,116.350029), 13);
//手动创建一个标注
var point = new GLatLng(39.9942100, 116.3645000);
var marker=new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, 'click',
function() {
var div=document.createElement("div");
div.innerHTML=document.getElementById("descs1").innerHTML;
marker.openInfoWindow(div);
}
);
//当在地图单击时加入创建一个新的标注
GEvent.addListener(map, 'click', onMapClick);
}
}
function onMapClick(marker, point) {
if (marker)
return;
// 创建标注，并添加到链表中
var newMarker = new GMarker(point, {draggable: true});
// alert(point);
map.addOverlay(newMarker);
//为新的标注加入注释
GEvent.addListener(newMarker, 'click', function(){onMarkerClick(newMarker,point)});
}
function onMarkerClick(marker,point) {
// 为气泡提示窗口创建动态 DOM 对象，这里我们用 DIV 标签
// alert(typeof(marker)+","+typeof(point));
var div = document.createElement('div');
div.style.fontSize = '10.5pt';
div.style.width = '250px';
div.appendChild(
document.createTextNode(document.getElementById("pDesc").value+",坐标:"+formatLatLng(point))); //formatLatLng(point) 获取坐标的函数
var hr = document.createElement('hr');
hr.style.border = 'solid 1px #cccccc';
div.appendChild(hr);
// 创建“删除”按钮
var lnk = document.createElement('div');
lnk.innerHTML = "删除";
lnk.style.color = '#0000cc';
lnk.style.cursor = 'pointer';
lnk.style.textDecoration = 'underline';
// 为“删除”按钮添加事件处理：调用 removePoint() 并重新计算距离
lnk.onclick =
function() {
map.closeInfoWindow();
map.removeOverlay(marker);
};
div.appendChild(lnk);
// 当用户关闭气泡时 Google Map API 会自动释放该对象
marker.openInfoWindow(div);
}
//格式化经纬度
function formatLatLng(pt) {
var latName, lngName;
var lat = pt.lat();
var lng = pt.lng();
latName = lat >= 0 ? '北纬' : '南纬';
lngName = lng >= 0 ? '东经' : '西经';
return lngName + formatDegree(lng) + '，'
+ latName + formatDegree(lat);
}
//格式化度数
function formatDegree(value) {
value = Math.abs(value);
var v1 = Math.floor(value);
var v2 = Math.floor((value - v1) * 60);
var v3 = Math.round((value - v1) * 3600 % 60);
return v1 + '°' + v2 + '\'' + v3 + '"';
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body onLoad="load()" onUnload="GUnload()">
<div>点击地图可以创建新的标注,在创建新标注前先加入注解:<br>
<textarea id="pDesc" style="width:600px; height:50px"></textarea>
</div>
<div id="map_canvas" style="width: 1024px; height: 600px"></div>
<div id="targetDescs" style="display:none">
<div id="descs1">
<img src='http://www.catalogeasy.cn/images/index_r2_c3.jpg'><br><a href='http://www.xxxxxx.com'>XXXXX有限公司</a> 联系电话：010-XXXXXX18
</div>
</div>
</body>
</html>
具体参考:
http://code.google.com/intl/zh-CN/apis/maps/
C.这是转自vifix的博客的谷歌地图应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>地理位置坐标转换</title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAe3YR_oZq7RQougOHlEQYxRTrT8HRiYVHGz6s-cexYhuHznMTnBQJ3hrfCSvSmQ_Fqr80B62kDy8djA&sensor=true" type="text/javascript"></script>
<script type="text/javascript">
window.g = {};
window.$ = function(id){return document.getElementById(id)};
window.onload = function() {
if (GBrowserIsCompatible()) {
g.map = new GMap2($("map"));
g.map.addControl(new GLargeMapControl());
g.map.addControl(new GMapTypeControl());
g.map.addControl(new GScaleControl());
g.geocoder = new GClientGeocoder();
g.getCoordinates = function(address) {
g.geocoder.getLatLng(
address,
function(point) {
if (point)
{
g.map.setCenter(point, 13);
var marker = new GMarker(point);
g.map.addOverlay(marker);
var info = "<strong>" + address + "</strong><br />坐标: " + point.lat() + "," + point.lng();
$("info").innerHTML = info;
marker.openInfoWindowHtml(info);
marker.__address_info = info;
GEvent.addListener(marker, "click", function() {
g.map.setCenter(this.getLatLng());
this.openInfoWindowHtml(this.__address_info);
$("info").innerHTML = info;
});
}
else
{
alert("无法解析: " + address);
}
}
)
}
$("btn_go").onclick = function(){
g.getCoordinates($("address").value);
}
$("btn_go").onclick();
}
else {
alert('不支持的浏览器');
}
}
window.onunload = function(){
GUnload();
}
</script>
<style media="screen">
body{
margin:0;
padding:0;
font-size:9pt;
line-height:1.5em;
}
#frame{
width:700px;
margin:20px auto 10px;
}
#form{
margin:0 0 10px;
text-align:center;
}
#form input{
border:1px solid #ccc;
font-size:9pt;
width:200px;
}
#form button{
font-size:9pt;
border:1px solid #ccc;
}
#form button:hover{
background:#eef;
}
#map{
height:400px;
margin:0 0 10px;
border:5px solid #ccc;
}
#vifix{
text-align:center;
}
#vifix a{
color:#f00;
text-decoration:none;
}
#vifix a:hover{
color:#f96;
}
</style>
</head>
<body>
<div id="frame">
<div id="form">
输入一个地址: <input id="address" value="杭州市西湖三潭印月" /> <button id="btn_go">获取坐标</button>
</div>
<div id="map"></div>
<div id="info">
</div>
<div id="vifix">
Powered by <a href="http://code.google.com/apis/maps/" target="_blank">Google Map API</a> / Created by <a href="http://vifix.cn">vifix.cn</a>
</div>
</div>
</body>
[img]http://dl.iteye.com/upload/attachment/551622/3bbf51f6-3014-331a-a951-f71d3a9a43dc.jpg[/img]
</html>
具体参考:
http://vifix.cn/blog/convert-address-to-coordinates-google-map-api.html