注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天边云E家 shaoruisky

IT博文共享,知识的海洋

 
 
 

日志

 
 

网页上嵌入地图 (百度地图,google地图,可缩放,可移动)  

2012-08-27 11:27:58|  分类: 网页设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1、百度地图:

http://dev.baidu.com/wiki/static/map/API/tool/creatMap/

这个地址是百度地图API创建地图页面。

里面你可以自己查找地图。然后获取代码。


网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家                                                                                 网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家








 

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家
网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

然后把代码保存下来,放到要嵌入的网页中去就行了。

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

但是,百度上有没有英文的地图,我还不知道。也没有找到。等找到了一定写上来。呵呵。。。

                                                                                                                                                                                                                                                                                                                                           

2.google地图

百度地图有没有英文的我不知道。也没有找到。但是google地图是有英文的。在这里跟大家分享下哈~(不过这个有点麻烦)

                                                                                                                                                                                                                       


(1)google有专门的生成嵌入的网页代码。http://ditu.google.com/ http://ditu.google.cn你可以自己去谷歌生成。但是,不知道为什么现在google地图经常性的打不开。所以老是有客户找上来说地图不显示了。

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

这个,都20分钟了,还在正在载入。。。。我相当的无语。。。。网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

但是,还有一个,google地球那个,就要好很多。而且速度很快。

 打开google地球在线地址http://www.earthol.com/

然后点击>>

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

然后点击点此制作
网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家
然后这样
网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

点击上面的链接然后

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家然后将此页面保存起来。删掉没用的。留下有用的。并且可以调整大小的。如此:

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

查看下代码

----------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0034)http://b.earthol.me/view-2885.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml" xmlns:v =
"urn:schemas-microsoft-com:vml"><HEAD><TITLE>Lanzy_zyr-在线地图-Google Earth地标分享</TITLE>
<SCRIPT type=text/javascript
src="Lanzy_zyr-在线地图-Google%20Earth地标分享_files/maps.js"></SCRIPT>
<SCRIPT type=text/javascript
src="Lanzy_zyr-在线地图-Google%20Earth地标分享_files/include.js"></SCRIPT>
<SCRIPT type=text/javascript>
x=120.14648;y=30.23059;zoom=8;info='Lanzy_zyr';mode=1;
</SCRIPT>
<META name=GENERATOR content="MSHTML 9.00.8112.16437"></HEAD>
<BODY onload=load() onunload=GUnload()>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
  <TBODY>
  <TR>
    <TD height="100%" vAlign=top width="100%">
      <DIV id=map style="height:500px; width:500px;"></DIV>
      </TD>
    </TR></TBODY></TABLE>
<SCRIPT type=text/javascript>
var gaJsHost = (("https:" == document.location.protocol) ? "." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</SCRIPT>
<SCRIPT type=text/javascript>
try {
var pageTracker = _gat._getTracker("UA-62195-12");
pageTracker._setDomainName(".earthol.me");
pageTracker._trackPageview();
} catch(err) {}</SCRIPT>
</BODY></HTML>

--------------------------------------------------------------------------------------------------------------------
也算是简单点。不过,

<SCRIPT type=text/javascript
src="Lanzy_zyr-在线地图-Google%20Earth地标分享_files/maps.js"></SCRIPT>
<SCRIPT type=text/javascript
src="Lanzy_zyr-在线地图-Google%20Earth地标分享_files/include.js"></SCRIPT>
<SCRIPT type=text/javascript>
x=120.14648;y=30.23059;zoom=8;info='Lanzy_zyr';mode=1;
</SCRIPT>

这个不知道能保留多久。我没研究过。

 

                                                                                                                                                                                                                                                                                                                                                                                                                             

(2)这个就是要自己弄的了。相对麻烦些。(想起来了,里面的坐标什么的在上面提到的应该可以找到。这样就不用一点一点的对了。)

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

代码: 

=========================================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>google在线地图</title>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=cn" type="text/javascript"></script>
 <!--[if lt IE 8]>
   <style type="text/css">
   li a {display:inline-block;}

   </style>
   <![endif]-->
</head>
<body>
<div id="map" style="width: 700px; height: 500px; margin:5px auto;"></div>
  <script type="text/javascript">
  <!--这个究竟是怎么回事我还不是很清楚。等清楚了找到简单而又明了的解释我就添加上。-->
  var mycenter = new google.maps.LatLng(30.82796,120.1787811);
  var myLatlng = new google.maps.LatLng(30.210500,120.2827906);/*第二个数值越大往上走。 第四个大了了往右*/
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,/*数值越大地图越详细*/
      center: mycenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

 
 
var image_factory = 'http://google-maps-icons.googlecode.com/files/factory.png';
var shadow = new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/shadow.png');
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
   icon: image_factory,
   shadow: shadow,
   title: 'Lanzy_zyr 鼠标移上去的显示名称'
    });

    var infowindow = new google.maps.InfoWindow({
 //maxWidth:340,
      content: '<div class="mapinfo"><h1>Lanzy_zyr  标签的名称</h1><li>这个是备注信息</li><li>联系QQ:973645180</li><li>地址:杭州</li> <li>E-Mail:<a href="" class="email">973645180@qq.com</a></li></div>'
   //size: new google.maps.Size(80,30),
    });

 

    infowindow.open(map, marker);


google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

 


var airport = [

          ['Shanghai Pudong International Airport', 31.148622,121.800785, 4, 'airport.png'],

          ['Hangzhou Xiaoshan International Airport', 30.235447,120.437837, 5, 'airport.png'],

          ['Shanghai Hongqiao International Airport', 31.194264,121.34629, 3, 'airport.png'],

          ['Shanghai Harbor', 31.363641,121.577191, 2, 'harbor.png'],

          ['Jiaxing Harbor', 30.598173,121.085515, 1, 'harbor.png'],


        ];

 


        function setMarkers(map, locations)

        {
             
            var shadow = new google.maps.MarkerImage('../images/shadow.png');

 

        //    var shape = {

           //     coord: [1, 1, 1, 20, 18, 20, 18, 1],


           //     type: 'poly'

          //  };

            for (var i = 0; i < locations.length; i++)

            {

                var beach = locations[i];
    
    var image = new google.maps.MarkerImage('../images/'+beach[4]);

                var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

                var marker = new google.maps.Marker({

                    position: myLatLng,

                    map: map,

                    shadow: shadow,

                    icon: image,

              //      shape: shape,

                    title: beach[0],

                    zIndex: beach[3]

                });

            }

        }

setMarkers(map, airport);

  </script>
</body>
</html>


======================================================================================================

然后看到的页面就是这样的。

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家
如果把上面代码中

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=cn" type="text/javascript"></script>

里面的language=cn换成language=en就是英文的了。网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家

如图:

网页上嵌入地图 (百度地图,google地图,可缩放,可移动) - MICRO CORE - 天边云E家


  评论这张
 
阅读(991)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016