网页中嵌入地图,爽 .

最新推荐文章于 2023-10-20 08:00:00 发布

sdudubing

最新推荐文章于 2023-10-20 08:00:00 发布

阅读量970

点赞数

分类专栏： asp.net学习文章标签： function stylesheet xhtml import 工作 div

asp.net学习专栏收录该内容

13 篇文章

订阅专栏

转发于：http://blog.youkuaiyun.com/andynq678/article/details/4064727

把以下代码复制到一个文本文档里面,然后把文件扩展名改成.htm,双击打开,可以看到一个电子地图,标有我工作和居住的地方,爽!
如果汉字显示出现乱码,请用记事本打开,选择另存为,把编码改成utf-8

<!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>
    <title>我的地图</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    
<style type="text/css">
      @import url(" http://www.google.com/uds/css/gsearch.css");
      @import url(" http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
      }
    </style>
  </head>
  <script src=" http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAvqq7_jpnZJuWHIc76SrRehTBfUk9TZrBRaIteybtnU2KziHEpRRwVOVY4d1QygKWoXDIy3n6RqwWNQ&hl=zh-CN"
            type="text/javascript"></script>
<script src=" http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script>
    <script src=" http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
  <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
         var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(40.03868795232629, 116.30976676940918), 13);
        var polyline = new GPolyline([
      new GLatLng(39.907,116.387),
      new GLatLng(39.935,116.407)
  ], "#ff0000", 5);
  map.addOverlay(polyline);
   map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
var markerOffice=new GMarker(new GLatLng(40.03868795232629, 116.30976676940918));
var markerHome=new GMarker(new GLatLng(40.063457197701275, 116.2741470336914))
map.addOverlay(markerHome);
map.addOverlay(markerOffice);
GEvent.addListener(markerHome,"click", function() {
        var myHtml = "这是我培训的地方,也是现在居住的地方";
        map.openInfoWindow(new GLatLng(40.063457197701275, 116.2741470336914), myHtml);
      });
GEvent.addListener(markerOffice,"click", function() {
        var myHtml = "上地创新大厦,我工作的地方";
        map.openInfoWindow(new GLatLng(40.03868795232629, 116.30976676940918), myHtml);
      });
GEvent.addListener(map,"click", function(overlay,latlng) {
          if (latlng) {
            var myHtml = "The GLatLng value is: " + latlng + " at zoom level " + map.getZoom();
            map.openInfoWindow(latlng, myHtml);
          }
        });

   }
    }

     GSearch.setOnLoadCallback(initialize);
    </script>

  <body οnlοad="initialize()" οnunlοad="GUnload()">
    <div id="map_canvas" style="width: 1000px; height: 600px"></div>
    <div id="message"></div>
  </body>
</html>