Angularjs + Yandex Maps

Я пытаюсь использовать Карты Яндекса с этим AngularJS module. Здесь они имеют demonstrations, и вот мой код:Angularjs + Yandex Maps

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. По умолчанию браузер устанавливает для свойства display значение «inline», поэтому без разбиения текстового элемента на ширину: 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 Maps

ответ

Смежные вопросы