Google Map 开发笔记——基础篇
博主是一个小公司的Java开发，无奈前一阵公司项目需要，赶鸭子上架在 web 端做了一下Google Map的基础实现，记录一下
说明：
本文主要介绍 Google Map Javascript Api 开发经验
谷歌官方文档地址：谷歌中国开发者网站Map Api
在开发之前，您需要获取密钥
一、使用入门：
1、在您需要显示地图的 html 页面嵌入这段 script
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
url 参数说明：
1）YOUR_API_KEY：Google Map 密钥，需要官网申请。
2）initMap：回调 function，初始化 Map 使用。
也可不使用回调函数，调用完成会生成全局的 google 这个对象，就可以在任意地方使用这个对象创建地图了。
2、地图 DOM 元素
<div id="map"></div>
注：initMap 中初始化地图使用
3、初始化地图
function initMap() {
var googleMap = new google.maps.Map(document.getElementById("map"), {
center: {lat: 40, lng: 116}, //地图初始化中心点
mapTypeId: google.maps.MapTypeId.ROADMAP,//地图类型（地图、地形图、卫星图 三种可选）
disableDefaultUI: false, //是否彻底停用默认用户界面
zoomControl: false, //是否显示右下角放大、缩小按钮
mapTypeControl: false, //是否显示左上角地图类型选择框
scaleControl: false, //是否右下角显示地图比例尺
zoom: 13 //地图缩放级别（放大、缩小也是修改此选项）
});
};
mapTypeId说明：
1）google.maps.MapTypeId.ROADMAP 地图
2）google.maps.MapTypeId.SATELLITE 卫星图
3）google.maps.MapTypeId.TERRAIN 地形图
可通过 ：googleMap.setMapTypeId(); 修改地图类型
注：下文中的 googleMap 均指
二、地图画点、线、面
1、标记（点）
google.maps.Marker 类
var myCenter=new google.maps.LatLng(lat,lng); //设置坐标点
var marker=new google.maps.Marker({ //new 一个点
position:myCenter, //设置标记的坐标 （唯一必填项）
icon:"/img/ry.png" //用来修改默认图标
});
marker.setMap(googleMap); //加载到地图上
marker.setMap(null); //删除地图上的点可使用 setMap 方法，设置为 null
面、线上的文字标注通常也可以使用 marker 来做，可以设置 marker 的背景图透明隐藏 marker ,然后设置lable 展示文字信息；
var marker = new google.maps.Marker({
position: latLng
});
marker.setLabel({ //设置 lable ,展示文字信息
color: '#15593b',
text: text
});
//根据当前缩放级别显示或隐藏文字标注
if (mMap.getZoom() > 12) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
marker.setIcon("../img/transparency.png");//透明图片，这样可以只显示文字
marker.setMap(mMap);
2、线
google.maps.Polyline 类
var polyline = new google.maps.Polyline({ // new 一条线
path: Array<google.maps.LatLng>, // 坐标点List
geodesic: true, // 是否跟随地球曲率
strokeColor: '#6f89ae', //颜色
strokeOpacity: 1.0, //不透明度（在0.0和1.0之间）
strokeWeight: 6 //线宽（像素为单位）
});
polyline.setMap(googleMap); //加载到地图上
polyline.setMap(null); //删除地图上的点可使用 setMap 方法，设置为 null
3、面
google.maps.Polygon 类
var polygon = new google.maps.Polygon({
paths : MVCArray<MVCArray<LatLng>>, //形成闭环的坐标点
strokeColor : '#15593b', //笔画颜色
strokeOpacity : 0.7, //透明度
strokeWeight : 2, //笔画宽度
fillColor : '#fff', //内部填充颜色
fillOpacity : 0.35, //填充透明度
editable : false //形状是否可拖动
});
polygon.setMap(googleMap);
polygon.setMap(null);
三、辅助功能
1、信息窗口(InfoWindow )
InfoWindow 在地图上方给定位置的弹出窗口中显示内容（通常为文本或图像）。信息窗口具有一个内容区域和一个锥形柄。柄顶部与地图上的某指定位置相连。通常情况会附加在上面说的标记、线、面上。
google.maps.InfoWindow 类
infoWindow = new google.maps.InfoWindow();
//窗口显示内容
var contentString = '<div><h3>' + this.extraInfo.name + '</h3>' +
'<div><p>' + "纬度：" + filter(cLat,2) + "，经度：" + filter(cLng,1) +
'</p></div></div>';
infoWindow.setContent(contentString); //设置弹框内容
//打开方式 1、直接输入坐标点
infoWindow.setPosition(cLatlng); //设置弹框坐标点
infoWindow.open(googleMap); //打开弹框
//打开方式 2、依赖于标记
infowindow.open(googleMap, marker);
infoWindow.close(); //关闭弹框
也可通过标记、线、面的鼠标事件、点击时间触发 InfoWindow 。
InfoWindow 会默认会有点击的叉号，有些时候infowindow 我们会设置为鼠标悬浮事件，这个时候不太需要叉号的存在，因此我们可以修改 css 来取消。如下：
.gm-style-iw + div {display: none;}
2、动态控制 Zoom
我们可以通过 googleMap.setZoom() 来修改当前的缩放比。
可是地图上我们通常会想让他自动根据我们要展示的元素来自动适配一个最合适的Zoom,这个时候我们可以借助 google.maps.LatLngBounds 这个类，下面是一个简单的用法：
/**
* 根据信息标注数组，在地图上全部展示出来，传入一个 marker 的数组
*/
this.toLatLngBounds = function (textMarkers) {
var bounds = new google.maps.LatLngBounds();
for (var i in textMarkers) {
var latLng = textMarkers[i].getPosition(); //获取 marker 的 Position（ LatLng）
bounds.extend(latLng);
}
//展示全部地块
googleMap.fitBounds(bounds);//或panToBounds(bounds)
};
3、获取鼠标坐标点
//可以为地图添加 mousemove 事件
google.maps.event.addListener(googleMap, 'mousemove', function(event) {
center = event.latLng;
var centerlat = center.lat();
var centerlng = center.lng();
});
三、绘图
通常我们除了通过代码自动加载前面提到的地图属性之外，还想要提供绘图功能，让用户能够与地图更好的交互，手动绘制曲线、面、圆、矩形等。这个时候谷歌地图为我们提供了一个很方便的库 Drawing
DrawingManager 类提供了一个图形界面，以供用户在地图上绘制多边形、矩形、折线、圆形和标记。
使用库
1、绘图工具是一种独立于主 Maps API JavaScript 代码的自包含库。要使用此库中包含的功能，必须先在 Maps API bootstrap URL 中使用 libraries 参数加载该库。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>
2、添加库参数后，即可创建 DrawingManager 对象，如下所示：
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(googleMap);
3、删除绘图工具
drawingManager.setMap(null);
隐藏或显示绘图工具控件：
// To hide:
drawingManager.setOptions({
drawingControl: false
});
// To show:
drawingManager.setOptions({
drawingControl: true
});
绘图工具隐藏时，我们通常是需要自定义样式，不使用谷歌本身提供的绘图插件选择框，这个时候我们可以通过设置 drawingMode 来确定需要画的是那种类型
drawingManager.setOptions({
drawingControl: false,
drawingMode:type //指定画图类型
});
//type 可接受的值是'marker'，'polygon'，'polyline'，'rectangle'，'circle'，或null。绘图模式null意味着用户可以正常与地图进行交互，点击不绘制任何内容。
创建形状叠加层后，会触发以下两个事件：
-
{overlay}complete 事件（其中 {overlay} 表示叠加层类型，例如 circlecomplete、polygoncomplete等）。对相应叠加层的引用会作为自变量进行传递
-
一个 overlaycomplete 事件。包含 OverlayType 和对相应叠加层的引用的对象字面量会作为自变量进行传递
google.maps.event.addListener(drawingManager, ‘circlecomplete’, function(circle) {
var radius = circle.getRadius();
});google.maps.event.addListener(drawingManager, ‘overlaycomplete’, function(event) {
if (event.type == ‘circle’) {
var radius = event.overlay.getRadius();
}
});
四、函数
通常我们在加载线、面以及通过 Drawing 完成绘图之后想要知道线的长度、面的面积等。谷歌为我们提供了另一个方便的库 Geometry
Google Maps JavaScript API Geometry 库提供诸多实用函数用于计算地球表面上的几何数据。此库包含三个命名空间：
-
spherical：其中包含球面几何学实用程序，让您能够根据纬度和经度计算角度、距离和面积
-
encoding：其中包含用于根据编码折线算法对折线路径进行编码和解码的实用程序
-
poly：其中包含用于涉及多边形和折线的计算的实用函数
google.maps.geometry 库不包含任何类；而是包含有关上述命名空间的静态方法。
1、距离、面积函数两点之间的距离是指两点之间最短路径的长度。最短的路径称为测地线。在一个球面上，所有测地线均是大圆的分段。要计算此距离，请调用 computeDistanceBetween()，并向其传递两个 LatLng 对象。
如果您有多个位置，则可改用 computeLength() 来计算某给定路径的长度。
距离结果以米表示。
要计算一个多边形区域的面积（以平方米为单位），请调用 computeArea()，并向其传递 LatLng 对象数组用于一个定义一个闭环。
958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
