您的位置：首页 > 编程语言 > Go语言

google map api 实例/google 地图 map 版权信息 / 自定义版权信息[作者：神龙之首]

2011-10-18 20:23 423 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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=gbk"/>

<title>地图效果</title>


<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAoGSnSKpvFJ_vd37z-3W2YBTvnP71Q9TKzzkAeGbDhgqBh291hxQ1Fz6KO9ilwgDlDwJLzZIilsTQWQ&hl=zh-CN&oe=gbk"
type="text/javascript"></script>

<script type="text/javascript">
/*地图*/

function initialize() {

if (GBrowserIsCompatible()) {

//加载地图区域

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

//设置中心坐标,缩放等级

map.setCenter(new GLatLng(39.917, 116.397), 13);

//控制器类型,（控件位置,控件大小）-可选参数

map.addControl(new GLargeMapControl(),new GControlPosition(G_ANCHOR_TOP_LEFT , new GSize(10,10)));

//加入卫星和混合地图标签

map.addControl(new GHierarchicalMapTypeControl());

//开启缩略图

map.addControl(new GOverviewMapControl());

//开启鼠标滑轮

map.enableScrollWheelZoom();

//开启地图搜索控件

map.enableGoogleBar();

// 添加底面叠加层,定坐标

var boundaries = new GLatLngBounds(new GLatLng(39.917, 116.397), new GLatLng(39.935, 116.42));

// 添加底面叠加层,添加图片,可作广告之类

var oldmap = new GGroundOverlay("http://hiphotos.baidu.com/slzs_zyt/pic/item/4b822ef479856970dcc4746c.jpg", boundaries);
map.addOverlay(oldmap);

//在地图的特定坐标位置创建HTML文本

map.openInfoWindowHtml(new GLatLng(39.922, 116.414),"<font color='blue' size='2'>大家好,我是 slzs……－－|||<br>这个添加层可以在很多地方利用</font>");

/*map.getCenter();可以得到地图中心位置坐标*/

// 创建自定义图标

var tinyIcon = new GIcon();

// 图片

tinyIcon.image = "http://hiphotos.baidu.com/slzs_zyt/pic/item/64638f51d0a30b8e8d54307c.jpg";

// 阴影

tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";

// 图片宽高

tinyIcon.iconSize = new GSize(70, 90);

// 阴影宽高

tinyIcon.shadowSize = new GSize(70, 90);

// 此图标在地图上的锚定点相对于图标图像左上角的像素坐标

tinyIcon.iconAnchor = new GPoint(6, 20);

// 信息窗口在此图标上的锚定点相对于图标图像左上角的像素坐标

tinyIcon.infoWindowAnchor = new GPoint(5, 1);

// 创建标记

var marker0 = new GMarker(new GLatLng(39.900,116.379),tinyIcon)

// 向地图上添加

map.addOverlay(marker0);

// 监听click事件

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

map.openInfoWindowHtml(new GLatLng(39.900,116.379),"<font color='red' size='2'>您进行了点击操作，弹出链接地址</font>");

window.open('http://hi.baidu.com/slzs_zyt/blog/item/44cd764e17d0a100b2de054f.html');

});

//延时9秒显示

window.setTimeout(function(){

map.openInfoWindowHtml(new GLatLng(39.900,116.385),"<font color='red' size='2'>这是一个可以点击弹出链接的标记</font>");

},9000);

//在特定位置加标记

map.addOverlay(new GMarker(new GLatLng(39.922,116.377)));

//延时3.5秒显示

window.setTimeout(function(){

map.openInfoWindowHtml(new GLatLng(39.922,116.377),"<font color='red' size='2'>这是一个固定位置的标记</font>");

},3500);

//添加一个可拖动的标记

var marker = new GMarker(new GLatLng(39.905,116.377), {draggable: true});

//监听这个标记的提起动作

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

map.closeInfoWindow();

});

//监听这个标记的放下动作

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

marker.openInfoWindowHtml("<font color='red' size='2'>已经放下，标记反弹</font>");

//延时1秒关闭提示信息

window.setTimeout(function(){marker.closeInfoWindow()},1000);

});

//添加这个标记

map.addOverlay(marker);

//延时6秒显示提示信息

window.setTimeout(function(){

marker.openInfoWindowHtml("<font color='red' size='2'>这是一个可拖动位置的标记,按住鼠标左键拖动</font>");

},6000);
// 记录标记

var gmarker= null;

//点击获取地理坐标

clickListener=GEvent.addListener(map, "click", function(marker,point){
if(point){
alert("x"+point.x+",y"+point.y+",倍率"+map.getZoom());
}

if(gmarker!=null){

//移除之前的标记

map.removeOverlay(gmarker);

}

gmarker=new GMarker(point);

//在点击位置加标记

map.addOverlay(gmarker);

}

);

}
clearMapCopyRight('map_canvas');

}
// google 地图版权，不是我不尊重版权，而是它令人难以忍受，经常超长超出地图范围，于是乎js强行暴力解决它

// 清理google版权信息

var clearMapCopyRightInterval=null;

function clearMapCopyRight(googleMapDivId){

var googleMapObj = document.getElementById(googleMapDivId);

if(googleMapObj){

mapDivNodes = googleMapObj.childNodes;

if(mapDivNodes){

for(i=0; i<mapDivNodes.length; i++){

var tmpStr = mapDivNodes[i].innerHTML;

if(tmpStr && tmpStr.indexOf("地图数据")>-1){

if(clearMapCopyRightInterval != null){

window.clearInterval(clearMapCopyRightInterval);

clearMapCopyRightInterval = null;

}

mapDivNodes[i].innerHTML="<a href='http://hi.baidu.com/slzs_zyt/blog/item/44cd764e17d0a100b2de054f.html'><font color='red'>神龙之首©自定义版权</font></a>";

return;

}

}

}

}

clearMapCopyRightInterval = window.setInterval(function(){clearMapCopyRight(googleMapDivId)},500);

}
</script>

</head>

<body onload="initialize()" onunload="GUnload()">

<center>

<h1>测试地图效果</h1>

<div style="position: absolute;z-index: 10;margin-top: 472px;margin-left:5px;background-color: #fff;width: 65px;height: 24px"/><font color='red' ><b>搜索</b></font></div>

<div style="position: absolute;z-index: 10;margin-top: 583px;margin-left:500px;font-size: 12px;background-color: #fff"/></div>

<div id="map_canvas" style="width: 95%; height: 500px;background-image:url('http://hiphotos.baidu.com/slzs_zyt/pic/item/498f2924a590b503d507422d.jpg');z-index: 1"></div>

<font style="font-size: 12px;color:blue">介绍说明：地图中有一个添加层，一个固定的标记，一个可拖动的标记，一个可弹出链接地址的自定义图标，google的logo被覆盖，地图移动时，加载部分的底部图片更换为自定义图片，点击地图提示坐标和缩放级别并标记 --------- 0神龙之首0</font>

</center>

</body>

</html>
<!--

注：你可以全文复制存为html中直接打开测试使用，若不明白可与群友讨论

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航