麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

Google Map(JS)开发入门(2):基本地图显示

在上一篇文章里,我简单的讲述了关于Google Map(JS)开发中API Key的申请,在以后的文章中,我将以示例的形式讲述Google Map(JS)开发过程。

几个约定

在以后的文章里,将在每一篇文章里展示两种代码,一种是js核心代码,一种是html+js全部代码。为了学习这里将html和js写在同一个文件里,这在实际开发环境中是不推荐的。另外,在最后将用iframe方式展示效果,不另外单独页面显示。

基本地图显示

学完本文,你将学会怎样在网页上显示地图。

JS代码

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(25.091075 , 121.55983449999997)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

全部代码(Html+JS)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>基本地图显示</title>
<!--加载google map api-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&key=你的API Key&sensor=true"></script>
<script type="text/javascript">
//设置基本参数 
var map;
function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(25.091075 , 121.55983449999997)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
//添加监听函数加载地图
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas" style="width:500px; height:500px;"></div>
</body>
</html>

把这段代码直接复制保存为.html文件,然后修改你的API Key即可使用。

效果展示

代码解读

<!DOCTYPE html>

将应用声明为 HTML5

<!--加载google map api-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&key=你的API Key&sensor=true"></script>

加载 Google Maps API,这是必须的。这里需要将 你的API Key 替换为你申请的Google Maps API Key,申请方法点击这里后面的sensor是表示是否会使用 GPS 定位器等传感器来确定用户的位置,因为现在html5通过浏览器可以获取经纬度,这里设为true即可。

var map;
function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(25.091075 , 121.55983449999997)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}

定义了initialize函数,里面设置了地图参数。

zoom:表示缩放比例

center:地图中心经纬度,这里设置的是台北

document.getElementById('map-canvas'):表示在'map-canvas'这个ID内部显示地图。

//添加监听函数加载地图
google.maps.event.addDomListener(window, 'load', initialize);

表示在整个页面加载完毕后调用initialize函数

相关阅读

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

手机阅读
公众号关注
知识星球
手机阅读
麻辣GIS微信公众号关注
最新GIS干货
关注麻辣GIS知识星球
私享圈子

留言板(小编看到第一时间回复)