使用ngmap创建标记之间的线 [英] create a line between markers using ngmap

问题描述

我使用ngmap和角JS来显示地图，而问题的一组标记。我需要油漆加入这些标记线。

我的code：

在视图：

\r

\r

＆LT;地图中心={{标记[0] .lat}}， {{标志[0] .lng}}变焦=12＆GT;\r
   ＆所述标志物纳克重复=POS中的标记位置={{pos.lat}}，{{pos.lng}}＆GT;＆下; /标记＆GT;\r
＆LT; /图＆GT;

\r

\r

\r

在我的控制器：

\r

\r

VAR应用= angular.module（'项目'，['ngMap']）\r
\r
app.controller（'对CiCTRL'，函数（$范围）{\r
    $ scope.markers = {[ID：1，纬度：37.772323，经度：-122.214897}，{ID：2，纬度：21.291982，经度：-157.821856}，{ID：3，纬​​度：-27.46758，经度：153.027892} ];\r
}）;

\r

\r

\r

解决方案

为了这个目的，你可以使用形状指令，例如：

 ＆LT;形状NAME =折线路径={{路径}}测=真正的行程彩色=＃FF0000中风不透明度=1.0行程-weight =2＆GT;＆下; /形状与GT;
 

其中，路径属性从标记初始化是这样的：

  $ scope.path = $ scope.markers.map（函数（标记）{
    返回[marker.lat，marker.lng]
}）;
 

工作实例

\r

\r

VAR应用= angular.module（'appMaps'，['ngMap']） ;\r
app.controller（'mainCtrl'，函数（$范围）{\r
    $ scope.markers = {[ID：1，纬度：37.772323，经度：-122.214897}，{ID：2，纬度：21.291982，经度：-157.821856}，{ID：3，纬​​度：-27.46758，经度：153.027892} ];\r
    $ scope.path = $ scope.markers.map（函数（标记）{\r
        返回[marker.lat，marker.lng]\r
    }）;\r
}）;

\r

＆LT;脚本src=\"https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio\"></script>\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js\"></script>\r
＆LT; D​​IV ID =map_canvas的NG-应用=appMapsNG控制器=mainCtrl＆GT;\r
        ＆LT;地图中心={{标记[0] .lat}}，{{标记[0] .lng}}变焦=5＆GT;\r
            ＆所述标志物纳克重复=POS中的标记位置={{pos.lat}}，{{pos.lng}}＆GT;＆下; /标记＆GT;\r
            ＆LT;形状NAME =折线路径={{路径}}测=真正的行程彩色=＃FF0000中风不透明度=1.0行程重量=2＆GT;\r
            ＆LT; /形状＆GT;\r
        ＆LT; /图＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

Plunker

I am using ngmap and angular js to show a set of markers in a map without problem. I need paint a line that join these markers.

My code:

In view:

 <map center="{{markers[0].lat}},{{markers[0].lng}}" zoom="12">
   <marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
</map>

in my controller:

var app = angular.module('Items', ['ngMap'])

app.controller('CICtrl', function($scope){
    $scope.markers = [{id:1, lat:37.772323, lng: -122.214897}, {id:2, lat:21.291982, lng: -157.821856}, {id:3, lat:-27.46758, lng: 153.027892}];
});

解决方案

For that purpose you could utilize shape directive, for example:

<shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"></shape>

where path property is initialized from markers like this:

$scope.path = $scope.markers.map(function(marker){
    return [marker.lat,marker.lng];
});

Working example

var app = angular.module('appMaps', ['ngMap']);
app.controller('mainCtrl', function ($scope) {
    $scope.markers = [{ id: 1, lat: 37.772323, lng: -122.214897 }, { id: 2, lat: 21.291982, lng: -157.821856 }, { id: 3, lat: -27.46758, lng: 153.027892 }];
    $scope.path = $scope.markers.map(function(marker){
        return [marker.lat,marker.lng];
    });
});

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl" >
        <map center="{{markers[0].lat}},{{markers[0].lng}}" zoom="5">
            <marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
            <shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2">
            </shape>
        </map>
</div>

Plunker

这篇关于使用ngmap创建标记之间的线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！