需要在使用Angular js的门户中呈现jquery mapael贴图

时间:2015-09-24 13:05:27

标签: jquery angularjs mapael

需要渲染mapael贴图以在使用Angularjs的门户中绘制点(基于城市lat,longs)。如果不使用角度路径库,这可以正常工作。但是一旦配置了路由,就不会渲染地图。它没有抛出任何错误,但在调试时,我发现了jquery.mapael.js中的类选择器'文件没有返回元素。

html片段如下:

<div class="mapContainer" ng-show="isCurrentViewMap()">
                  <div class="map">Alternative content</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" charset="utf-8" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="js/india.js" charset="utf-8" ></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js" charset="utf-8" ></script>
<script src="js/jquery.mapael.js" charset="utf-8" ></script>    
<script src="js/mapConfig.js"></script>

mapConfig.js如下:

$(function(){
        $(".mapContainer").mapael({
            map : {
                     // Set the name of the map to display
                     name : "india"
                    , defaultPlot : {
                        type: "circle",
                        size:5,
                        attrs : {
                            fill: "#000"
                            , opacity : 0.6
                        }
                        , text : {
                            attrs : {
                              fill : "#fff"
                            }
                            , attrsHover : {
                                fill : "#000"
                            }
                         }
                    }
                    , defaultArea: {
                        attrs : {
                            fill : "#fff"
                            , stroke: "#aaa"
                        }
                        , attrsHover : {
                            fill: "#fff"
                        }
                        , text : {
                            attrs : {
                                fill : "#000"
                            }
                            , attrsHover : {
                                fill : "#000"
                            }
                        }
                    }
                },



                // Add some plots on the map
                plots : {

                    // Plot positioned by x and y instead of latitude, longitude
                    'Delhi' : {
                        latitude :28.613939, 
                        longitude: 77.209021,                                               
                        href:"NewFile.html",
                        text : {content : "Delhi"}

                    },

                }
            });
        });

我确实看到了替代内容,但没有看到地图。请帮我一些指示。

0 个答案:

没有答案