zoukankan      html  css  js  c++  java

  • google 地图 v2

    api参考地址：http://www.codechina.org/doc/google/gmapapi/

    http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html

    http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/demogallery.html

    谷歌地图基础：

    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&;v=2&key=ABQIAAAANBnkO8F66DkFfXFSXsGy5RRlhMm9Qf438FJMaqr4Q83fhP-jqBQl-w08zRkw0bnveDIJ3yTYbnTt3Q"
    type    ="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(    new GLatLng(37.4419, -122.1419), 13);
    }
    }

    //]]>
     </script>
    </head>
    <body onload="load()" onunload="GUnload()">
    <div id="map" style=" 500px; height: 300px"></div>
    </body>
    </html>

    谷歌地图带指示：

    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google µØÍŒ JavaScript API ÊŸÀý</title>
    <script src="http://ditu.google.com/maps?file=api&amp;v=2"
    type    ="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(    new GLatLng(39.917, 116.397), 14);
    map.openInfoWindow(map.getCenter(),
    document.createTextNode(    "Hello, world"));
    }
    }

    //]]>
     </script>
    </head>
    <body onload="load()" onunload="GUnload()">
    <div id="map" style=" 500px; height: 300px"></div>
    </body>
    </html>

    谷歌地图放大

    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google µØÍŒ JavaScript API ÊŸÀý</title>
    <script src="http://ditu.google.com/maps?file=api&amp;v=2"
    type    ="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(    new GLargeMapControl());
    GEvent.addListener(map,     "zoomend", function() {
    document.getElementById(    "message").innerHTML = map.getZoom();
    });
    map.setCenter(    new GLatLng(39.917, 116.397), 14);
    }
    }

    //]]>
     </script>
    </head>
    <body onload="load()" onunload="GUnload()">
    <div id="map" style=" 500px; height: 300px"></div>
    <br/>
    <div id="message"></div>
    </body>
    </html>

    谷歌地图带标注：

    <!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 µØÍŒ JavaScript API ÊŸÀý</title>
    <style type="text/css">
    v\:*     {
    behavior    :url(#default#VML);
    }
    </style>
    <script src="http://ditu.google.com/maps?file=api&amp;v=2"
    type    ="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(    new GSmallMapControl());
    map.setCenter(    new GLatLng(39.917, 116.397), 14);

    // Ëæ»úµØÔÚµØÍŒÉÏÌíŒÓ 10 žö±ê×¢
     var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    for (var i = 0; i < 10; i++) {
    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
    southWest.lng()     + lngSpan * Math.random());
    map.addOverlay(    new GMarker(point));
    }

    // ÌíŒÓÒ»žöÓÉ 5 žöËæ»úµãÁ¬³ÉµÄÕÛÏߣ¬°ÑËæ»úµã°ŽÆ䟭¶ÈÅÅÐòÒÔ±ÜÃâÕÛÏßÏàœ»
     var points = [];
    for (var i = 0; i < 5; i++) {
    points.push(    new GLatLng(southWest.lat() + latSpan * Math.random(),
    southWest.lng()     + lngSpan * Math.random()));
    }
    points.sort(    function(p1, p2) {
    return p1.lng() - p2.lng();
    });
    map.addOverlay(    new GPolyline(points));
    }
    }

    //]]>
     </script>
    </head>
    <body onload="load()" onunload="GUnload()">
    <div id="map" style=" 500px; height: 300px"></div>
    </body>
    </html>
  • 相关阅读:
    WEB服务器防盗链_HttpAccessKeyModule_Referer(Nginx&&PHP)
    子查询2
    子查询
    接上篇elasticsecrchi 进行搜索及时提示，数据库以及后台代码
    Django项目之【学员管理系统】
    Django 请求生命周期【图示】
    Django 之一些request封装的常用功能
    Django 认证系统 cookie & session & auth模块
    Django 模型系统(model)&ORM--进阶
    Django 模型系统(model)&ORM--基础
  • 原文地址：https://www.cnblogs.com/wangkangluo1/p/2068658.html
Copyright © 2011-2022 走看看