需要渲染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"}
},
}
});
});
我确实看到了替代内容,但没有看到地图。请帮我一些指示。