angular+ionic 展示百度地图

最近自己刚刚接触angular和ionic 然后自己就试着怎么将百度地图展示出来

废话不多说 直接上代码

html代码如下

<ion-view view-title="地图">
    <ion-content>
        <app-map style="height:400px;margin:12px;box-shadow:0 3px 25px black;" address="{{address}}"> </app-map>
    </ion-content>
</ion-view>

 其中<app-map>是使用了angular的指令

app.directive("appMap", function () {
        return {
            restrict: "E",
            replace: true,
            template: "<div id='allMap'></div>",
            scope: {
                center: "=",        // Center point on the map (e.g. <code>{ latitude: 10, longitude: 10 }</code>).
                markers: "=",       // Array of map markers (e.g. <code>[{ lat: 10, lon: 10, name: "hello" }]</code>).
                width: "@",         // Map width in pixels.
                height: "@",        // Map height in pixels.
                zoom: "@",          // Zoom level (one is totally zoomed out, 25 is very much zoomed in).
                zoomControl: "@",   // Whether to show a zoom control on the map.
                scaleControl: "@",   // Whether to show scale control on the map.
                address:"@"
            },
            link: function (scope, element, attrs) {
                var map;
                // 百度地图API功能
                map = new BMap.Map("allMap");
                map.addControl(new BMap.ZoomControl());
                // 创建地址解析器实例
               var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上,并调整地图视野
                myGeo.getPoint(scope.address, function(point){
                    if (point) {
                        map.centerAndZoom(point, 16);
                        map.addOverlay(new BMap.Marker(point));
                    }
                }, "");
            }
        };
    });

 这样就简单的完成了百度地图的展示了