用js显示google地图总结 -

yaoyanzhu

浏览: 501082 次
性别:
来自: 北京

最近访客更多访客>>

yzj159

loginboot

永无止境2313

qq_24313835

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

用js显示google地图总结

博客分类：

JavaScript

功能较全的一个，可显示地址，可以缩放，拖动（直接把代码复制下来即可）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>MyHtml2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

            map.openInfoWindow(new GLatLng(31.2249992526385, 121.51159197092056), companyAddress);
            }); //点击就显示地址，缺点：地点提示关不掉。若把以上三行注释掉，关掉地点提示，就无法在打开提示。
            map.enableContinuousZoom();
            //启用使用鼠标滚轮缩放
            map.enableScrollWheelZoom();
            //添加地图类型
            //map.addMapType(G_PHYSICAL_MAP);
            //设置地图显示类型
            //map.setMapType(G_PHYSICAL_MAP);
            //添加控件
            map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 32)));
        }
    }

</script>

<body onload="initialize()" onunload="GUnload()">
    <div id="mapdiv" style="width: 695; height: 374; font-size:15px;">
        </div>
    <br>
</body>
</html>
点击显示经纬度

</head>

//                GEvent.addListener(marker, "dragstart", function() {
//                    map.closeInfoWindow();
//                });

//                GEvent.addListener(marker, "dragend", function() {
//                    marker.openInfoWindowHtml("正在反弹...");
//                });
                //map.clearoverlays();
              // map.addOverlay(marker);

                var myHtml = "GPoint 值是 : " + point;
                map.openInfoWindow(point, myHtml);
            });
            map.enableContinuousZoom();
            //启用使用鼠标滚轮缩放
            map.enableScrollWheelZoom();
            //添加地图类型
            //map.addMapType(G_PHYSICAL_MAP);
            //设置地图显示类型
            //map.setMapType(G_PHYSICAL_MAP);
            //添加控件
            map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 32)));
        }
    }

</script>

<body onload="initialize()" onunload="GUnload()">
    <div id="mapdiv" style="width: 695; height: 374">
        mapdiv</div>
    <br>
</body>
</html>

右下角显示当前位置

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %>

<!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=utf-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=3&key=ABQIAAAAB4YemV6fPrENI8yI4YDFtRTmwICogzMOKaxKEnhPUPLF-x6hxRR4Q894V3A6N4GoB5q-EdU1SKPArg" type="text/javascript"></script>
<script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(23.755181766112635, 120.552978515625), 7);
        map.setUIToDefault();
        map.addControl(new GMapTypeControl());
        map.addControl(new GNavLabelControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(1, 2)));
        map.enableGoogleBar();

      //讀取user.xml
        GDownloadUrl("user.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("row");
          var points = new Array();

          for (var i = 0; i < markers.length; i++) {
            point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lng")));

            var marker = new GMarker(point);
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("contact_address");
            var html = "<b>" + name + "</b> <br/>" + address;

            GEvent.addListener(marker, "click", function() {
              this.openInfoWindowHtml(html);

            });
            map.addOverlay(marker);
          }

        });
      }
    }
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 700px; height: 400px"></div>
</body>
</html>

分享到：

网络编程 | js 计算浏览器宽度和高度

2012-11-26 15:37
浏览 2816
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用js显示google地图总结

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用js显示google地图总结

评论

发表评论

相关推荐

jquery 选择器，模糊匹配

window.addEventListener来解决让一个js事件执行多个函数

javascript中ie8/ie9不支持Array.indexOf解决办法

实时Javascript开发框架Clouda、Meteor、Firebase对比

select边框颜色修改兼容样式

任意美化你的文件域 <input type="file" /> 兼容各浏览器

JS判断页面是否出现滚动条

JavaScript 图片切割效果

显示输入剩余字数

div固定悬浮（左侧、右侧、任意相对位置）

js 计算浏览器宽度和高度

怎么样让弹出的DIV显示在网页的中间？

DIV固定在屏幕的中间/两侧,不随滚动条移动而改变位置

图片大小 图片尺寸 计算

enctype="multipart/form-data"中Form参数的获取

js动态增加删除 Table 行

JS动态控制鼠标位置，DIV由隐藏显示时控制画面控制

CSS代替bordercolorlight与bordercolordark

Javscript Json数据操作(数据增,删,改,查)

jquery 导航代码，兼容IE6,IE7,FF,OPREA,谷歌

最近访客更多访客>>

图片大小图片尺寸计算