文章/答案/技术大牛

发布

社区首页 >问答首页 >Angularjs + Yandex地图

问Angularjs + Yandex地图
EN

Stack Overflow用户

提问于 2016-04-21 18:20:48

回答 1查看 737关注 0票数 0

我正在尝试在这个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地图的新手，所以，这对你来说可能是个愚蠢的问题，但我在网上找不到有用的东西。

angularjs

yandex-maps

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-22 07:50:04

非标准标签ya-map的风格问题。默认情况下，浏览器将其显示属性设置为“内联”，因此如果没有文本元素折叠为宽度:0，高度:0。

此外，您也不使用在控制器中声明的任何函数。

您可以在演示页中看到示例

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36777539

复制

相似问题

问Angularjs + Yandex地图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularjs + Yandex地图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularjs + Yandex地图
EN