网页中嵌入地图,爽 .

转发于:http://blog.csdn.net/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"/>
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值