google map初次使用总结

摘要: google map初次使用总结，主要介绍首次使用各个地图api的步骤，需要注意事项、已经过程中使用到的功能。

前言

最近项目中需要使用google地图相关功能，如地址定位、地址划分等，为了使下次使用google地图的相关功能时少走弯路、故把过程中遇到的问题总结了一下。也给初次使用google地图的小伙伴做参考。

使用过程

一、申请api key

具体过程请参照官网，https://developers.google.cn/，去年12月份谷歌开发者平台面向中国开发了部分功能，就不需要翻墙了。

二、引入api

<script src="http://maps.google.cn/maps/api/js?language=zh-TW&v=3.exp&key=AIzaSyCoy86qvSNN4A1nEA5Kg-jVdNNjjyVbyFI&libraries=places,drawing,geometry" type="text/javascript"></script>

说明：想使用google map中的api必须先引入脚本，其中v表示版本、key就是第一步申请的api key，

如果要使用到地址搜索、划分区域等功能，则需要加入libraries=places,drawing,geometry引入相关控件。分别为地址查询库、绘图库、函数库。

三、初始化map

$(function(){ var mapProp = { center:new google.maps.LatLng(22.1223232, 123.32322331), zoom:17, mapTypeId:google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }; map=new google.maps.Map(document.getElementById("map"),mapProp); }); html代码 <div id="map" ></div>

部分属性说明：center，表示地图的中心位置。zoom表示地图缩放比例，越大显示的范围越小。mapTypeId.ROADMAP 用于显示默认的道路地图视图。这也是默认地图类型，

MapTypeId.SATELLITE 用于显示 Google Earth 卫星图像。
MapTypeId.HYBRID 用于同时显示正常视图和卫星视图
MapTypeId.TERRAIN 基于地面信息显示物理地图。

通过这三步就已经把google地图初始化好了。这个过程中有部分属性想了解可以查看api。

四、项目中使用到的功能

1、通过搜索地址，自动加载地址，勾选之后自动定位到地图中的位置。同时获取地址的详细信

function initAutocomplete() { var input = document.getElementById('autocomplete'); var searchBox = new google.maps.places.SearchBox(input); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); map.addListener('bounds_changed', function() { searchBox.setBounds(map.getBounds()); }); var markers = []; searchBox.addListener('places_changed', function() { var places = searchBox.getPlaces(); if (places.length == 0) { return; } markers.forEach(function(marker) { marker.setMap(null); }); markers = []; var bounds = new google.maps.LatLngBounds(); places.forEach(function(place) { var icon = { url: place.icon, size: new google.maps.Size(100, 100), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(50, 50) }; markers.push(new google.maps.Marker({ map: map, icon: icon, title: place.name, position: place.geometry.location })); if (place.geometry.viewport) { bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } alert(place.formatted_address+"地图对应的idplace_id-----"+place.place_id); alert(place.formatted_address+"的纬度---"+place.geometry.location.lat()); alert(place.formatted_address+"的经度-----"+place.geometry.location.lng()); }); map.fitBounds(bounds); map.setZoom(18); }); }

说明：使用自动搜索功能，需要引入api时加上libraries=places。

2、多边形绘画区域功能，同时记录多边形所有节点的坐标，判断一个点是否在一个多边形内部。

function showOrHidedrawingManager(thisObj,index){ var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: false, editable : true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYGON, ] }, //多边行属性，颜色、边框、透明度等。 polygonOptions: { fillColor: areaData[index].color, fillOpacity: 0.5,//填充透明度 strokeColor:areaData[index].color, strokeWeight: 2, editable: true, zIndex: 1 } }); drawingManager.setMap(map); //监听事件 ，当绘图完成时，存储多边形。 google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { var coordinate = new google.maps.LatLng(22.28255,114.1577184); //地图上的一个点 //判断一个点是否在一个多边形中。 var isWithinPolygon = google.maps.geometry.poly.containsLocation(coordinate, polygon) alert("判断是否在多边形中---环球大厦-------------"+isWithinPolygon); var vertices = polygon.getPath();//遍历所有的多边形节点。 // polygon.getPaths();//Retrieves the paths for this polygon. 这里很奇怪，getPaths结果只有一个值。 for (var i =0; i < vertices.getLength(); i++) { var xy = vertices.getAt(i); alert("循环多边形的每个节点---经度--"+xy.lng()+"纬度----"+xy.lat()); } }); } }

说明：获取多边形所有节点polygon.getPath();而不是polygon.getPaths();，经测试polygon.getPaths();只获取第一个节点，应该是api出问题了，估计后面会更新。

获取多边行节点主要为了可以存储这个多边形，方便数据回显。

绘图存在多种类型：多边形、矩形、圆等，通过drawingMode: google.maps.drawing.OverlayType.POLYGON,指定。CIRCLE，Rcetangle等。

3、多边形回显示

回显在初始化地图时，通过获取一个一个的点集合，组装成图像 ，在地图中显示出来。

var triangleCoords = [ {lat: 22.28218, lng: 114.1577}, {lat: 22.28432, lng: 114.1547}, {lat: 22.27678, lng: 114.1537}, {lat: 22.27567, lng: 114.1536}, {lat: 22.27467, lng: 114.1645} ]; var bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: '#0088cc', strokeOpacity: 0.8, strokeWeight: 3, fillColor: '#0088cc', fillOpacity: 0.35 }); bermudaTriangle.setMap(map);

多个多边行，就多次这样处理。

还有很多控件没有使用到，等以后使用到了在进行更新。

这个过程中还是需要多查看api，api地址https://developers.google.cn/maps/documentation/javascript/3.exp/reference，现在不需要翻墙还是方便很多的。里面也有一些例子可以参考。

目前网页版的api查询不怎么方便，等以后研究好在更新。