关闭

google map 开发(1)- 新建一个地图及标记

1811人阅读 评论(4) 收藏 举报

一直觉的googleMap很牛,每天上完班晚上抽出几个小时研究google Map api 开发。 嘻嘻


google Map API 版本详解就不多介绍了,自己去google Map API找吧,我只说说我从入门开始是怎么实现的功能的,能对读者有部分帮助。


https://developers.google.com/maps/?hl=zh-cn


本示例使用的是 google Map Javascript API V3 版本


https://developers.google.com/maps/documentation/javascript/?hl=zh-cn


1、新建一个google Map 实例

google.maps.Map 类

<!DOCTYPE html>//html5定义方式
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&language=zh&region=CN">//载入google Map API
</script>
/*
libraries参数:
1)geometry 包含实用工具函数,用于计算地球表面的标量几何值(例如距离和面积)。有关详情,请查看几何图形库文档
2)adsense 可让您的 Maps API 应用程序加入适合具体环境的文本广告,从而让您通过向用户显示广告来获取广告收益。有关详情,请查看 AdSense 库文档
3)panoramio 所包含的地图项可用于将 Panoramio 照片图层添加到 Maps API 应用程序中。有关详情,请查看 Panoramio 图层文档sensor 参数:以指明此应用程序是否使用传感器确定用户的位置。
*/
<script type="text/javascript">  function initialize() {    var latlng = new google.maps.LatLng(39.904239,116.407392);//地图定位(维度,经度)    var myOptions = {      zoom: 5,//缩放级别 0-17      center: latlng,//显示地图中心位置      mapTypeId: google.maps.MapTypeId.ROADMAP
//ROADMAP,用于显示 Google Maps 默认的普通二维图块。SATELLITE,用于显示拍摄的图块。
//HYBRID,用于同时显示拍摄的图块和突出特征(道路、城市名)图块层。TERRAIN,用于显示自然地形图块,自然地形图块中会显示高度和水体特征(山脉、河流等)。   
};    var map = new google.maps.Map(document.getElementById("map_canvas"),        myOptions);//创建map对象  }</script></head><body onload="initialize()">  <div id="map_canvas" style="width:100%; height:100%"></div></body></html>


2、添加单个图标

google.maps.Marker 类

  var image = 'beachflag.png';
  var myLatLng = new google.maps.LatLng(39.904239,116.407392);
  var beachMarker = new google.maps.Marker({
      position: myLatLng,//标记的位置
      map: map,//指定一个地图(google.maps.Map)对象
      icon: image//这个参数是设置图标图片,可以去掉使用默认图标
  });
}
例图:


如果添加多个标记怎么办?


var myLatLng = new google.maps.LatLng(39.904239,116.407392);
  var beachMarker = new google.maps.Marker({
      position: myLatLng,//标记的位置
      map: map,//指定一个地图(google.maps.Map)对象
  });

var myLatLng1 = new google.maps.LatLng(39.1613, 117.2147);
  var beachMarker1 = new google.maps.Marker({
      position: myLatLng1,//标记的位置
      map: map//指定一个地图(google.maps.Map)对象
  });


当然如果现实显示大量的图标这种方式是不可取的,需要采取其他的方式以后再说。


OK,第一节就到这里了。




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:48274次
    • 积分:840
    • 等级:
    • 排名:千里之外
    • 原创:34篇
    • 转载:9篇
    • 译文:0篇
    • 评论:8条
    最新评论