Angularjs + Yandex地圖

我正在嘗試使用Yandex地圖和這個AngularJS module。在這裏，他們有demonstrations，這裏是我的代碼：Angularjs + Yandex地圖

的index.html

<!DOCTYPE html> 
<html lang="ru" xmlns:vml="urn:schemas-microsoft-com:vml" ng-app="myApp" ng-controller="myController"> 
<head> 
    <title></title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1" /> 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
    <link rel="stylesheet" href="style.css"> 

    <script src="angular.min.js"></script> 
    <script src="ya-map-2.1.min.js"></script> 


    <script src="script.js" type="text/javascript"></script> 
</head> 
<body> 

    <div id="map" class="w3-col s10 w3-dark w3-border">  
     <!-- 
     <ya-map ya-zoom="8" ya-center="[37.64,55.76]" style="width:400px;height:500px;"></ya-map> 
     --> 
    </div> 

</body> 
</html>

的script.js

console.log("script starts"); 

var myApp = angular 
    .module('myApp', ['yaMap']) 
    .controller("myController", function ($scope) { 
     console.log("In the controller"); 
     var _map; 


     $scope.afterMapInit = function (map) { 
      _map = map; 
     }; 
     $scope.del = function() { 
      _map.destroy(); 
     }; 

     console.log("After $scope ops"); 

     $scope.initialize = function() { 
      var mapOptions = { 
       center: [50.5, 30.5], 
       zoom: 8 
      }; 
      ymaps.ready(function() { 
       $scope.map = new ymaps.Map("map", mapOptions); 
      }) 
     } 
    });

的style.css

body { 
    background-color: #fff; 
    margin: 40px; 
} 

#body { 
    margin: 0 15px 0 15px; 
} 

#frmMain { 
    width: 100%; 
    height: 100%; 
}

請問，如果你知道爲什麼我不能加載地圖和那個代碼有什麼問題，（我想這是全部錯誤），告訴我它！

我是AngularJS和Yandex Maps的全新手，所以對你來說這可能是一個愚蠢的問題，但我在互聯網上找不到任何有用的東西。

來源

2016-04-21 Movsar Bekaev

在這裏風格的非標準標籤ya-map。默認情況下，瀏覽器將其顯示屬性設置爲「內嵌」，所以沒有文本元素摺疊爲寬度：0，高度：0。

此外，您不使用控制器中聲明的任何函數。

你可以看到樣品中Demo Page

var myApp = angular 
 
    .module('myApp', ['yaMap']) 
 
    .controller("myController", function($scope) { 
 
    var _map; 
 

 
    $scope.afterMapInit = function(map) { 
 
     _map = map; 
 
    }; 
 
    $scope.del = function() { 
 
     _map.destroy(); 
 
    }; 
 

 
    });

ya-map { 
 
    display: block; 
 
    width: 400px; 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
<script src="//rawgit.com/tulov/angular-yandex-map/master/ya-map-2.1.min.js"></script> 
 

 
<div id="map" class="w3-col s10 w3-dark w3-border" ng-app="myApp" ng-controller="myController"> 
 
    <ya-map ya-zoom="8" ya-center="[37.64,55.76]" ya-after-init="afterMapInit($target)"></ya-map> 
 
    <button ng-click="del()">Удалить</button> 
 
</div>

來源

2016-04-22 07:50:04 Grundy

Angularjs + Yandex地圖

回答

相關問題