网页里面嵌入google地图

naturally · 发表于 2013-6-25 16:06:05

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？注册账号

x

google开发了google地图，并免费提供一套js接口大家使用，所以现在在网页里面嵌入地图，已经非常简单了。
多说浪费时间，直接上例子。
下面的网页，拷贝一下新建一个网页，立马就可以看到你的网页里出现了google地图功能了。非常简单。

<!DOCTYPE html>
<html>
  <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
   html { height: 100% }
   body { height: 100%; margin: 0; padding: 0 }
   #map_canvas { height: 100% }
</style>
<script type="text/javascript"
   src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
   function initialize() {
      var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),
         mapOptions);
   }
</script>
  </head>
  <body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>当然，上面的网页简单，提供的功能也很简单。但是已经够酷了。
如果要添加新的功能，比如比例尺，弹出气泡标注位置等等，还要研究一下google map api，
好在都是js类库，用起来比较简单，而且google的教程也不错，具体可以看。
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja

上官无忌 · 发表于 2013-6-26 10:11:12

我记得2年前已经有了.根据ip 或者物理地址然后在map 上显示出来的php 源码了

当初还觉得挺好玩的

naturally · 发表于 2013-6-26 10:15:37

上官无忌发表于 2013-6-26 10:11
我记得2年前已经有了.根据ip 或者物理地址然后在map 上显示出来的php 源码了

当初还觉得挺好玩的 ...

对，已经开放好几年了，现在都是第三版了。
你说的应该是自动定位那种，就像智能手机里面的地图导航类似。
需要把参数改为sensor=true，
我现在的项目用不到这块，就没看。

hina1115 · 发表于 2013-6-26 17:31:17

分享分享很好～

账号		自动登录	找回密码
密码			注册账号

[IT 交流] 网页里面嵌入google地图

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

评分

相关帖子

浏览过的版块