标签: ng-map

我正在尝试使用angular material desgin双列创建布局:

<div layout="row">
  <div flex="33">
    123
  </div>
  <div flex="77">
    456
  </div>
</div>

没关系.但如果我放置一个ng-map元素:

<div layout="row">
  <div flex="33">
    123
  </div>
  <div flex="77">
    <ng-map ></ng-map>
  </div>
</div>

呈现堆叠垂直.为什么？

演示:https://plnkr.co/edit/mNdHAwGXC0vLE7Erttib？p = preview

我想使用ngMap将谷歌地图添加到我的应用程序.

演示是"静态的",因为它们只有硬编码的HTML.我希望我的代码是"动态的",因为它会周期性地要求服务器查看其数据库并返回一堆坐标来绘制,这将随时间而变化.我希望这很清楚; 如果没有,请询​​问更多细节.

我修改了ngmap标记演示,每两秒生成一些随机的纬度/经度坐标(而不是去我的服务器,就像我的最终应用程序一样).请参阅Plunk.

控制台中没有错误,似乎ngMap正在尝试添加我的标记,因为我在控制台中看到了很多这样的东西......

adding marker with options,  
Object {ngRepeat: "myMarker in markers", position: O}
clickable: true
ngRepeat: "myMarker in markers"
position: O
A: 103.96749299999999
k: 1.387454
__proto__: O
visible: true
__proto__: Object

其中K和A是Lat/Long,正如我所期望的那样.

但是......我在地图上看不到任何标记.我究竟做错了什么？

[更新]一个很好的答案,我很高兴之后获得了赏金.对于其他读这个并且希望使用ngMap的人来说@allenhwkim在另一个stackoverflow问题中说,我认为,在他的博客上,ngMap只是为你创建地图,之后你用标准的Google Maps API来操纵它.

例如,在循环添加标记之前,我声明
var bounds = new google.maps.LatLngBounds();并在循环中,在将标记添加到地图后,我bounds.extend(latlng);和最后,在循环之后,我

var centre = bounds.getCenter();  
$scope.map.setCenter(centre);

我分叉了答案并创建了一个新的Plunk来展示这个.这不是世界上最实用的功能,但重点是展示如何使用$scope.mapGoogle Maps API.再次感谢Allen,ngMap.

我在角度应用程序中使用ng-map.在我的地图我使用方向,但我不需要A和B点.请帮我隐藏这些标记.我有一个解决方案, 但它没有帮助ng-map.那是我怎么说的.

<ng-map zoom="14"
    center="1135 Karamea-Kohaihai Rd, Kahurangi National Park, Tasman"
    style="height:90%" >
    <directions
      draggable="true"
      panel="p2"
      travel-mode="DRIVING"
      origin="1135 Karamea-Kohaihai Rd, Kahurangi National Park, Tasman"
      destination="Pier St, Jackson Bay, West Coast, New Zeland" suppressMarkers='true'>
    </directions>
    <custom-marker id="start"
      position="1135 Karamea-Kohaihai Rd, Kahurangi National Park, Tasman">
      <div> Start point </div>
    </custom-marker>
    <custom-marker id="end"
      position="Pier St, Jackson Bay, West Coast, New Zeland">
      <div> Ends point </div>
    </custom-marker>
  </ng-map>

或者我可能没有正确使用它.检查这个plunker.救命

我正在尝试使用地图,当我只有一个标记并且zoom-to-include-markers ="true"时,我正面临着这种情况,结果是无论我如何设置,地图都会放大zoom属性的结果如下所示:

虽然我想要的第一个渲染应该看起来像这样:

这是我的代码:

<ng-map
        ng-if="items"
        zoom="5"
        map-type-id="ROADMAP"
        pan-control="false"
        street-view-control="true"
        street-view-control-options="{position: 'RIGHT_BOTTOM'}"
        map-type-control="false"
        zoom-control="true"
        zoom-control-options="{style:'BIG', position: 'RIGHT_BOTTOM'}"
        scale-control="true"
        default-style="true"
        zoom-to-include-markers="true"
        class="map">

    <marker on-click="" data-ng-repeat="item in items" position="{{[item.latitude, item.longitude]}}">
    </marker>

</ng-map>

我试图调整zoom属性,但它没有对地图结果进行任何更改.

更新:

使用js中的setZoom()函数更改缩放是这样做的,有没有办法根据地图的值计算合适的缩放？

谢谢

我正在和角度手表阵列一样摔跤.我有以下标记:

<map name="theMap" center="{{mapInfo.center.toUrlValue()}}" zoom="{{mapInfo.zoom}}" on-dragend="dragEnd()" on-zoom_changed="zoomChanged()">
    <marker ng-repeat="pin in pins() track by pin.iconKey()" position="{{pin.latitude}}, {{pin.longitude}}" title="{{pin.streetAddress}}" pinindex="{{$index}}" on-click="click()" 
            icon="{{pin.icon()}}"></marker>
</map>

pins()返回的每个引脚都有许多属性,子属性等.其中一个子属性控制标记颜色.当该子属性发生变化时,我希望UI更新.

因为ng-repeat似乎是基于对集合的简单更改来监视,所以如何实现这一目标并不明显.我认为我的跟踪功能iconKey()会这样做,因为它会根据子属性的值返回不同的值.但那没用.

另一件事:从一个在指令下运行的$ interval回调中,子属性发生了变化.我提到这一点是因为,在之前的帖子中,有人认为可能存在上下文/范围问题.

但是,即使我在UI控制器中的事件监听器中进行了更改(事件在$ interval回调的"success"子句中引发),它仍然不起作用.

这就是为什么我认为问题只是棱角分明没有注意到iconKey()的变化; 它的表现就像所有的$ ng手表一样,ng-repeat是数组的长度.当子属性发生变化时,这不会改变.

更新

我创造了一个能够展示我面临的问题的傻瓜.您可以在http://plnkr.co/edit/50idft4qaxqw1CduYkOd找到它

它是我正在构建的应用程序的缩减版本,但它包含基本元素(例如,用于保存有关地图引脚的信息的数据上下文服务以及用于切换其中一个引脚数组元素的子属性的$ interval服务) .

您可以通过单击菜单栏中的"开始"来开始更新周期(您可能需要稍微向下拖动地图以将两个引脚置于完整视图中).它应该切换每个引脚的颜色,或者每次5次,每2秒一次.它通过在控制器中定义的侦听器中切换pin对象的isDirty属性的值来实现.该事件由$ interval服务引发.

如果您在测试周期中在第22行中断,您将看到返回的图钉图标.因此,角度内的某些东西需要信息......但是引脚颜色不会改变.

我期待有人能够迅速指出与我的任何理论无关的骨头错误:).对于我穿的任何眼罩都要提前道歉.

更新2

在检查响应中的代码片段后,我简化了我的plnkr,并证明了角度实际上是在子属性发生变化时更新UI.所以这似乎是ng-map中的限制或错误.

我正在使用非常酷的ng-map库for angular,我想知道如何访问ng-map marker指令引用的基础标记对象

所以,我有这个标记:

<div id="map-search" data-tap-disabled="true">
  <map zoom="15" disable-default-u-i="true">
    <marker ng-repeat=" pos in positions" position="{{pos.latitude}}, {{pos.longitude}}" id="{{pos.index}}" on-click="pinClicked()">
    </marker>
  </map>
</div>

在这种情况下,我没有找到在点击事件期间访问Google Maps Marker对象的直接方式; 从控制器:

  app.controller('MapSearchController', function($scope) {

      $scope.$on('mapInitialized', function(event, map) {
        $scope.map = map;
        //Assume existence of an Array of markers
        $scope.positions = generatePinPositionsArray();
      });

      $scope.pinClicked = function(event, marker) {
        console.log('clicked pin!');
        //HOW CAN I GET THE MARKER OBJECT (The one that was clicked) HERE?
        console.log('the marker ->', marker); //prints undefined
      }; …

我在angularjs应用程序中使用ngMap.当我尝试在地图元素上设置缩放时,我遇到了错误.以下是Chrome控制台的错误消息:

 TypeError: Cannot read property 'apply' of undefined
    at Wk.eventFunc (ng-map.js:205)
    at Object.T.trigger (main.js:18)
    at kf (main.js:22)
    at Wk.N.set (main.js:21)
    at Wk.setZoom (main.js:29)
    at ng-map.js:1568
    at angular.js:6837
    at forEach (angular.js:323)
    at Object.$get.Attributes.$set (angular.js:6835)
    at interpolateFnWatchAction (angular.js:8157)

当我的map元素的zoom属性触发时:

<map center="{{initCenter.lat}}, {{initCenter.lng}}" zoom="{{zoom}}" on-dragend="dragend()" on-zoom_changed="zoomchanged()">

被绑定到我的角度控制器:

app.controller("mapCtrl", function ($scope, $location, dataContext) {
    $scope.markers = [];

    $scope.initCenter = dataContext.center();
    $scope.zoom = dataContext.zoom();

dataContext是一种在应用程序中公开各种状态变量的服务.我也尝试通过函数设置$ scope.zoom,产生相同的错误.

错误发生在ng-map.js文件的第1568行:

    var observeAndSet = function(attrs, attrName, object) {
  attrs.$observe(attrName, function(val) {
    if (val) {
      void 0;
      var setMethod = …

我正在使用ng-map我的Angular应用程序中显示谷歌地图,但他可能是一个严格的JS问题(甚至只是CSS？).

如何实现响应式设计,以便我的地图能够很好地适应不同的显示尺寸,无论是桌面/移动设备,还是只是用户调整浏览器页面的大小？

这个页面做到了,但是它使用了I帧并且只有一个静态地图,而我将在运行时更新我的​​地图(定期跟踪).

我对这一切都很陌生,所以我希望我的问题可以理解.

我正在一个项目中使用Allenhwkim的精彩ngMap.我知道我需要使用Maps Javascript v3 API来操作地图,这很顺利,除了我无法获得任何事件监听器,例如,$google.maps.event.addListener(markers[i], 'click', function()... 工作

具体来说,我正在尝试在我的标记上创建一个onClick事件.这是一个例子:http://plnkr.co/edit/HAcEfWl5LR9SGGqbcXcW？p = preview

在这里,我尝试在marker指令上使用ng-click属性.不过,我一无所获.http://plnkr.co/edit/FqwNhqEgDe75il8nU0sC?p=preview

我正在使用ng- map在angularjs中使用google map。我想在拖动标记的末尾得到地址。我试图在他们的文档中找到，但是没有找到。他们的文档很好，但是没有找到我想要的。尝试后，我得到纬度和拖动结束后登录。但是我需要地址。所以我要做的是从标记中获取地址，或者我可以将经纬度转换为地址。但我没有找到任何代码来将地址转换为经纬度。这是我可以经纬度的代码：-

<ng-map>
    <marker centered="true" position="current-location" draggable="true" on-dragend="getCurrentLocation()"></marker>
</ng-map>

这是方法：-

$scope.getCurrentLocation = function(){
     $scope.pos = this.getPosition();
     console.log($scope.pos.lat(),$scope.pos.lng());
}

拖动标记后，请帮助我找到地址。