Google会映射折线和标记Angular JS

时间:2016-08-30 18:30:18

标签: javascript angularjs google-maps google-maps-api-3

我正在尝试更新地图上标记的位置并添加跟踪。之前我只实现了更新标记并且工作正常,但现在我无法添加跟踪。我正在使用AngularJS。

以下是初始化代码。

 $scope.mapProp = {
    center:new google.maps.LatLng(0.0,0.0),
    zoom:12,
    mapTypeId:google.maps.MapTypeId.ROADMAP
   };

 $scope.map=new google.maps.Map(document.getElementById("googleMap"),$scope.mapProp);

 $scope.markerImage = {
    url: "/static/internet_of_things_angular/img/truck-marker.png",
    // This marker is 60 pixels wide by 32 pixels high.
    size: new google.maps.Size(60, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(30, 16)
 };

 $scope.trailCoordinates = [];

 $scope.trail = new google.maps.Polyline({
      path: $scope.trailCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

这是每当我收到带有新坐标的消息时更新的代码。

var existingmarker;
 $scope.addMarker = function(position, title, map){
        marker = new google.maps.Marker({
            position: position,
            map: map,
            icon: $scope.markerImage,
            title: title
        });
        marker.setMap(map);
        map.panTo( new google.maps.LatLng( position.lat, position.long ) );
        existingmarker = marker;
    }

 $scope.updateMarker = function(position, marker, map){
        marker.setPosition( new google.maps.LatLng( position.lat, position.long ));
        map.panTo( new google.maps.LatLng( position.lat, position.long ) );
    }

 $scope.receive_and_update_map = function(msg, map){
        if(msg != null) {
            var position = new Object();
            position.lat = msg.latitude;
            position.long = msg.longitude;

            if (existingmarker != null)
                $scope.updateMarker(position, existingmarker, map)
            else
                $scope.addMarker(position,msg.id, map )
        }
    }

 $scope.receive_and_update_trail = function(msg, map){
        if(msg != null) {
            var position = new Object();
            position.lat = msg.latitude;
            position.lng = msg.longitude;
            var latlng = {lat: msg.latitude, lng: msg.longitude};
            $scope.trailCoordinates.push(latlng);
            $scope.trail.setMap(map);
        }
     }

我做错了什么?

0 个答案:

没有答案