google map 开发（1）- 新建一个地图及标记

来源：互联网发布：淘宝店铺背景图编辑：程序博客网时间：2024/05/01 08:18

一直觉的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，第一节就到这里了。