0

我在我的 Angular 应用程序中使用 NgMaps

我正在尝试动态地给出中心点，但它占用了我没有给出的其他一些点：

HTML：

<ng-map zoom="5" center="{{center}}" style="height:600px">
</ng-map>

在控制器中：

$scope.center =[18.9750, 72.8258];

这是 Plnkr 代码：

http://plnkr.co/edit/hbNZdSKuUZqVSsJN7he3?p=preview

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

  <link rel="stylesheet" href="style.css">

  <!-- JS -->
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
  <!-- load angular, ngRoute, ngAnimate -->
  <script src="http://code.angularjs.org/1.4.7/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="app.js"></script>

</head>

<body ng-controller="MainCtrl">
  <ng-map zoom="8" center="{{center}}" style="height:600px">
    <!-- <ng-map zoom="5" center="[20.1450107,77.8764691]" style="height:600px"> -->
    <custom-control id="home" position="TOP_RIGHT" index="1000">
      <div style="background-color: rgba(0,0,0,.5); color:#fff;width:200px;padding: 10px;" ng-if="customMarkers[0].clustors">
        <table class="table table-condensed">
          <thead>
            <tr>
              <th style="width: 50%">Priority</th>
              <th style="width: 50%">Color</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="(key, value) in customMarkers[0].clustors">
              <td>Priority {{$index}}</td>
              <td class="{{clustorcolors[$index]}}"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </custom-control>

    <div ng-repeat="(key, value) in customMarkers[0].clustors">
      <div ng-repeat="point in value">
        <custom-marker position="{{point.coordinate}}" on-mouseover="clustormouseover()" on-mouseout="clustormouseout()">
          <div class="mappointer {{clustorcolors[$parent.$index]}}" ng-click="clickme(key,$index)">
            <div class="infobox" id="clustor_{{$parent.$index}}_{{$index}}" ng-show="point.visibility">
              BM_M_EXECTIVE : {{point.BM_M_EXECTIVE}},<br>
              BM_PROFIT : {{point.BM_PROFIT}},<br>
              BM_QUANTITY : {{point.BM_QUANTITY}},<br>
              BM_NAME : {{point.BM_NAME}},<br>
              BM_DISTRICT : {{point.BM_DISTRICT}},<br>
              BM_TOTALPURCHASE : {{point.BM_TOTALPURCHASE}},<br>
            </div>
          </div>
        </custom-marker>
      </div>
    </div>
  </ng-map>
</body>

</html>
4

2 回答 2

0

我遇到了同样的问题，因为不ngMap 识别$interpolateProvider（根据@allenhwkim）。解决方案：

HTML：

<ng-map id="map" zoom="5" style="height:600px"></ng-map>

Javascript：

var that = this;    
NgMap.getMap('map').then(function(map) {
    that.map = map;
    that.map.setCenter(new google.maps.LatLng(18.9750, 72.8258));
});

我希望，它可以帮助某人。感谢@allenhwkim ngMap！

于 2016-10-02T09:01:29.840 回答
0

我不知道您的情况，但是对于以下示例，我似乎可以正常工作。

http://plnkr.co/edit/cec5b88WpZcoiSd1Mq28?p=preview

javascript

  vm.center = "37.7699298, -122.4469157";
  vm.setCenter = function() {
    vm.center = "38.7699298, -123.4469157";
  }
});

html

  center: {{vm.center}}<br/>
  <button ng-click="vm.setCenter()">Set Center to "38.7699298, -123.4469157"</button>
</div>
于 2016-02-22T15:10:44.273 回答