最近做了一个基于angularJS 1.5 的手表定位后台管理系统，里面涉及到谷歌地图开发，特此记录！
总体来说，开发分为3步，引入秘钥—-指定容器—-创建实例。具体如下。

1.申请秘钥

去谷歌开发者中心申请秘钥（需翻墙）。

2.HTML页面

<div id="googleContainer" style="height: 100%"></div>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=你的秘钥&language=zh-CN"></script>

3.JS

'use strict';let googleMap = angular.module('watchApp.googleMap', []);
googleMap.controller("googleMapCtrl",["$scope", "$window", function ($scope,$window) {$scope.point = {lat: 22.560118, lng: 114.004252}; //中心点$scope.map = new google.maps.Map(document.getElementById("googleContainer"), {//创建谷歌地图center: $scope.point,                       //地图的中心点zoom: 13,               　　　　　　　　　　  //地图缩放比例mapTypeId: google.maps.MapTypeId.ROADMAP,   //指定地图展示类型：卫星图像、普通道路scrollwheel: true,          　　　　　　　　　 //是否允许滚轮滑动进行缩放zoomControlOptions: {                      //缩放控件position:google.maps.ControlPosition.TOP_LEFT  //设置位置 左上},//地图类型控件mapTypeControlOptions: {position:google.maps.ControlPosition.TOP_RIGHT},//街景小人控件streetViewControlOptions: {position:google.maps.ControlPosition.TOP_LEFT},// 启用缩放scaleControl: true,});// 地图点击事件$scope.map.addListener('click', function (e) {$scope.getAddress(e);});// 获取点击地址$scope.getAddress = function (e) {let geocoder = new google.maps.Geocoder();geocoder.geocode({ location: e.latLng }, function geoResults(results, status) {if (status === google.maps.GeocoderStatus.OK) {// do something}});};$scope.map.addListener('idle', function () { //地图闲置时触发if ($scope.isCenterFlag) {if($scope.pointCoordinate.lng === undefined)return false;$scope.map.panTo($scope.pointCoordinate);}});$scope.pointCoordinate = {}; //当前选中点坐标$scope.mapMakers = [];// 创建覆盖物标签$scope.createMark = function (val) {let marker = new google.maps.Marker({position: {lat: val.lat, lng: val.lng},icon: "map/online.png",animation: google.maps.Animation.DROP,map: $scope.map // 地图实例对象});// 创建信息窗口实例let infoWindow = new google.maps.InfoWindow({content: "<p>这是信息窗口内容</p>",});// 标记点击事件marker.addListener('click', function(e) {// 打开信息窗口infoWindow.open($scope.map, marker);// e.latLng.lng() 获取点击点的精度if ($scope.isCenterFlag) {$scope.map.panTo({lat: 22.560118, lng: 114.004252}); // 地图中心移至指定点}});};
}]);

分享一个博主整理的地图开发API
原文地址 ： http://blog.csdn.net/silentmuh/article/details/53941203