google map

wuzijingaip

浏览: 331981 次
性别:
来自: 广州

最近访客更多访客>>

jerry_shen

xsjwan

wmyydyzyq

lijun1191997

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Google HTML JavaScript XHTML Blog

<!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>

<!--
注意：
编码格式要统一。比如javascript要用gbk的,html页面要用gbk的
网页的META信息里也最好有一个指明是GBK的标签：
<meta content="text/html; charset=gbk" http-equiv="Content-Type" />

4.最后也是最重要的。要指明oe=gbk
不是动态加载的时候需要在scr的链接上加上"&oe=gbk";
如果里动态加载的话，参照下面的形式加载：
google.load("maps", "2", {
    "language" : "zh-CN",
    callback: initMap,
    other_params: "oe=gbk"
});

-->
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAjmge-Cnswmns7MZtVuoQ9xQa5boJZaiEnEVymmjoM0nsUDDv8xS0ESvXYMZW1fRx5Mal3mBDev-zZg&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);
      }
      ); 
    }
}

    </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被覆盖，地图移动时，加载部分的底部图片更换为自定义图片，点击地图提示坐标和缩放级别并标记&nbsp;&nbsp;---------&nbsp;&nbsp;0神龙之首0</font>
    </center>
</body>
</html>

分享到：