`
longgangbai
  • 浏览: 7256140 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Google技术应用---在线地图的应用开开使用（提供源码）

Google编程HTMLJavaScriptXHTML 
阅读更多

我们都知道，以前要在自己网站上嵌入Google Maps的卫星地图数据，需要学习复杂的Google Maps API的知识，还要申请API Key，现在，Google发布了一个新的功能，只需要简单的粘贴一段HTML代码，就可以将Google Maps嵌入到用户的网站中。

　　这个功能有利于用户分享和交流Google Maps的地图数据，博客主和管理员不需要再掌握复杂的编程技术就可以在自己网站上嵌入Google Maps数据，嵌入的方法非常简单，只需要进入Google Maps，定位到需要分享的位置，然后点击“Link to this page”链接，将“Paste HTML to embed in website”处的IFRAME的HTML代码复制出来，将其粘贴到自己的网站即可，不需要任何的编程技能。

　　在中文版本的Google地图上ditu.google.com，同样支持完全相同的功能，而且界面是全中文的，在Google地图上点击的是“显示本页链接”中的“粘贴 HTML 以便嵌入网站”。

　　这个功能将推动Google Maps的普及和应用，让更多的人能更好的分享Google Maps的数据，是一个很有远见的网站推广计划。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description"
   content="" />
  <meta name="keywords" content="" />
  <title></title>
  <script
   src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=898d9d3a6020c830abbc78270f50b1a13c8d3cade5a8d21328d4a7803428551a9e4fdd23cbc00259"></script>
 </head>

 <body>

  <div id="mapObj" style="height:400px;width:500px"></div>
  <SCRIPT LANGUAGE="JavaScript">
  var city_center_index = "上海";
  var hotelname = "东方大酒店";
  //设置地图初始化参数对象
  var mapOptions = new MMapOptions();
  //设置地图组件的Id
  mapOptions.mapId = "fmptest";
  //设置地图的初始Zoom值
  mapOptions.zoomLevel = 17;
  //设置地图的中心点
  mapOptions.center = new MLatLng(city_center_index);
     
  //创建地图对象
  var mapObj = new MMap("mapObj", mapOptions);
  mapObj.showNavigator(true);
  //添加酒店地址气泡
   //创建样式的对象
  var pointStyle = new MStyle();

//设置样式底线的颜色
  pointStyle.lineColor = "0xF1FCDA";

//设置样式大小
  pointStyle.lineSize = 1;

//设置填充的颜色
  pointStyle.fillColor = 0xddaa99;

//设置样式的透明度
  pointStyle.fillOpacity = 80;
  pointStyle.labelColor = 0x553344;
  mapObj.addOverlay(new MCustomPointOverlay(new MLatLng(city_center_index), "http://api.mapabc.com/fmp/test/components/point/DynamicPoint/redbubble.swf", pointStyle, 1), true);
  </script>
 </body>
</html>

 

源代码如下：

 

  • map.rar (1.1 KB)
  • 下载次数: 69
分享到：
| Google的应用
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics