AngularJS中的谷歌地图开发

最近做了一个基于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