AngularJS中的百度地图开发

最近用angularJS，在项目中做了百度地图功能，特此记录。

页面

  <div id="baiduContainer" style="height: 100%" ng-controller="baiduMapCtrl"></div>
  <script type="text/javascript" 
  src="http://api.map.baidu.com/getscript?v=2.0&ak=你的秘钥&services=&t=20170517145936"></script>

秘钥去百度开发者中心申请。

JS

let baiduMap = angular.module('watchApp.baiduMap', []);
baiduMap.controller("baiduMapCtrl",["$scope", function ($scope) {
    //地图初始化
    $scope.map = new BMap.Map("baiduContainer"); // 页面div的id
    $scope.point = new BMap.Point(114.026033, 22.559138);  // 创建点坐标
    $scope.map.centerAndZoom($scope.point, 14);
    $scope.map.enableScrollWheelZoom(); //启动鼠标滚轮缩放地图
    //增加地图控件
    $scope.map.addControl(new BMap.NavigationControl({ //地图平移缩放控件
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        enableGeolocation: true
    }));
    $scope.map.addControl(new BMap.CityListControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        offset: new BMap.Size(70, 20),
    }));
    $scope.map.addControl(new BMap.GeolocationControl());// 添加定位控件
    $scope.map.addControl(new BMap.ScaleControl());//比例尺控件
    $scope.map.addControl(new BMap.OverviewMapControl());//缩略地图控件
    $scope.map.addControl(new BMap.MapTypeControl());//地图类型控件
    // 中心点
    $scope.map.setCurrentCity("深圳");
    // 地图点击事件
    $scope.map.addEventListener("click", function(e){
        let pt = e.point;
        // 点击点的坐标对象
        new BMap.Geocoder().getLocation(pt, function(rs){
            if (rs === undefined && rs === null)
                return false;
            let addComp = rs.addressComponents;
            let site = addComp.province  + addComp.city + addComp.district 
                        + addComp.street + addComp.streetNumber;
        });
    });
    //拖拽事件
    $scope.map.addEventListener("dragend", function(e){
        //code
    });
    //放大事件
    $scope.map.addEventListener("zoomend", function(e){
        //code
    });
    //调用此函数创建标记点
    $scope.createMark = function (val) {
        let src = val.isOnline ? "map/online.png" : "map/offline.png";
        let point = new BMap.Point(val.lng, val.lat);
        let marker = new BMap.Marker(point, {  // 创建标注
            icon:new BMap.Icon(src, new BMap.Size(32,41))
        });
        let label = new BMap.Label(val.name,{offset:new BMap.Size(37,6)}); // 创建标签
        label.setStyle({
            color : "#666",
            borderColor: "#ffa423",
            fontSize : "12px",
            height : "20px",
            lineHeight : "0",
            fontFamily:"微软雅黑",
            maxWidth:'none',
            padding: '10px'
        });
        let infoOpts = {
            enableMessage:true//设置允许信息窗发送短息
        };
        $scope.map.addOverlay(marker); // 将标记点加到地图
        marker.setLabel(label); // 标记点增加label标签
        marker.setAnimation(BMAP_ANIMATION_DROP); // 标记点加载动画
        marker.addEventListener("click",function (e) {
            let p = e.target;
            $scope.pointCoordinate.lng = p.getPosition().lng;
            $scope.pointCoordinate.lat = p.getPosition().lat;
            $scope.map.openInfoWindow(new BMap.InfoWindow(msg,infoOpts),point); //开启信息窗口
        });
    }
});