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

あなたのケースはわかりませんが、次の例では問題なく動作しているようです。

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 に答える
0

（@allenhwkimによると）を認識しngMap ないため、同じ問題がありました。解決：$interpolateProvider

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 に答える