Javascript AngularJS中谷歌地图的方向标记

我一直在互联网上寻找解决方案，但运气不好。 我正在Umbraco（AngularJS）上建立一个网站——我使用UI谷歌地图插件——效果非常好

我已经实现了路线方向，它就像一个魅力-我唯一的问题是，当方向显示在地图上时，我不能更改“a”和“B”图标

这就是我的范围：

$scope.map = {
            center: {
                latitude: 55.711898,
                longitude: 9.5387363
            },
            zoom: 12,
            events: {
                'tilesloaded': function (map) {
                    if (load) {
                        $timeout(function () {
                            maps.event.trigger(map, "resize");
                            var marker = new maps.Marker({
                                position: center,
                                map: map,
                                icon: biscuitIcon
                            });
                            marker.setMap(map);
                            map.setCenter(marker.getPosition());
                            directionsDisplay.setMap(map);
                        }, 500);
                        load = false;
                    } else {
                        maps.event.trigger(map, "resize");
                    }
                }
            },
            options: {
                disableDefaultUI: true,
                zoomControl: false,
                styles: [{'featureType':'water','elementType':'all','stylers':[{'color':'#f0f0f0'}]},{'featureType':'landscape','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'road.highway','elementType':'geometry','stylers':[{'color':'#000000'}]},{'featureType':'road.arterial','elementType':'geometry.fill','stylers':[{'color':'#363636'}]},{'featureType':'poi.park','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'poi.attraction','elementType':'geometry.fill','stylers':[{'color':'#cccccc'}]}]
            },
            control: {}
        };

下面是填写“从”-“到”表格时发生的情况：

我尝试了“makeMarker”方法（），但没有成功。你们谁能指出我的头撞在墙上的地方吗

哦，顺便说一句。我在使用“makeMarker”时尝试了“console.log”信息，所有信息都显示在我的控制台中，但它没有出现在我的地图上：（我现在非常绝望

提前谢谢！

---

/Kucko

对于放置标记，您可以使用

ui gmap markers

指令。下面的示例显示如何打印路由和设置结束/开始样式的标记：

var-appMaps=angular.module（'appMaps'，['uiGmapgoogle-maps']）；
控制器（'mainCtrl'，函数（$scope，uiGmapIsReady，$log）{
$scope.startlocation=‘纽约州纽约’；
$scope.endlocation='加利福尼亚州圣地亚哥'；
$scope.markers=[]；
$scope.icons={
开始：{
网址：'http://maps.google.com/mapfiles/ms/micons/blue.png',
大小：{宽：44，高：32}，
原点：{x:0，y:0}，
主播：{x:22，y:32}
},
完:{
网址：'http://maps.google.com/mapfiles/ms/micons/green.png',
大小：{宽：44，高：32}，
原点：{x:0，y:0}，
主播：{x:22，y:32}
}
};
$scope.map={
中心：{
纬度：55.711898，
经度：9.5387363
},
缩放：12，
选项：{
disableDefaultUI:true，
动物控制：错误，
样式：[{'featureType'：'water'，'elementType'：'all'，'stylers'：[{'color'：'f0f0f0'}}，{'featureType'：'scape'，'elementType'：'geometry'，'stylers'：[{'color'：'ccccccc'}}，{'featureType'：'road.highway'，'elementType'：'geometry'，'stylers'：{'color'：'000000}，{'featureType'：'road.Arteral'，'elementType'：'geometry.fill'，'stylers'：[{'color'：'363636'}]，{'featureType'：'poi.park'，'elementType'：'geometry'，'stylers'：[{'color'：'CCCCC'}]，{'featureType'：'poi.attraction'，'elementType'：'geometry.fill'，'stylers'：[{'color'：'cccccc'}]
},
控件：{}
};
uiGmapIsReady.promise（）
.then（函数（实例）{
printRoute（）；
});
var printRoute=函数（）{
var directionsService=new google.maps.directionsService（）；
变量方向请求={
来源：$scope.com，
目标：$scope.endlocation，
航路点：对，
travelMode:google.maps.travelMode.DRIVING
};
路由（DirectionRequest，函数（响应，状态）{
if（status==google.maps.directionstatus.OK）{
var map=$scope.map.control.getGMap（）；
var directionsDisplay=新建google.maps.DirectionsRenderer({
地图：地图，
方向:回应,，
真的吗
});
var leg=response.routes[0]。legs[0]；
setMarker（0，leg.start_位置，$scope.icons.start，'title'）；
setMarker（1，leg.end_位置，$scope.icons.end，'title'）；
}否则{
$log.error（'请求失败：'+状态）；
}
});
}
var setMarker=功能（id、latLng、图标、标题）{
var markerInfo={
id:id，
纬度：latLng.lat（），
经度：latLng.lng（），
标题:标题,，
图标：图标
};
$scope.markers.push（markerInfo）；
};
})；

.angular谷歌地图容器{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}

---

对于放置标记，可以使用

ui-gmap-markers

指令。下面的示例显示如何打印路由和设置结束/开始样式标记：

var-appMaps=angular.module（'appMaps'，['uiGmapgoogle-maps']）；
控制器（'mainCtrl'，函数（$scope，uiGmapIsReady，$log）{
$scope.startlocation=‘纽约州纽约’；
$scope.endlocation='加利福尼亚州圣地亚哥'；
$scope.markers=[]；
$scope.icons={
开始：{
网址：'http://maps.google.com/mapfiles/ms/micons/blue.png',
大小：{宽：44，高：32}，
原点：{x:0，y:0}，
主播：{x:22，y:32}
},
完:{
网址：'http://maps.google.com/mapfiles/ms/micons/green.png',
大小：{宽：44，高：32}，
原点：{x:0，y:0}，
主播：{x:22，y:32}
}
};
$scope.map={
中心：{
纬度：55.711898，
经度：9.5387363
},
缩放：12，
选项：{
disableDefaultUI:true，
动物控制：错误，
样式：[{'featureType'：'water'，'elementType'：'all'，'stylers'：[{'color'：'f0f0f0'}}，{'featureType'：'scape'，'elementType'：'geometry'，'stylers'：[{'color'：'ccccccc'}}，{'featureType'：'road.highway'，'elementType'：'geometry'，'stylers'：{'color'：'000000}，{'featureType'：'road.Arteral'，'elementType'：'geometry.fill'，'stylers'：[{'color'：'363636'}]，{'featureType'：'poi.park'，'elementType'：'geometry'，'stylers'：[{'color'：'CCCCC'}]，{'featureType'：'poi.attraction'，'elementType'：'geometry.fill'，'stylers'：[{'color'：'cccccc'}]
},
控件：{}
$scope.getDirections = function(){
            directionsService.route({
                origin: $scope.startlocation,
                destination: $scope.endlocation,
                optimizeWaypoints: true,
                travelMode: google.maps.TravelMode.DRIVING
            }, function(response, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0].legs[0];
                  directionsDisplay.setPanel(document.getElementById('directions-panel'));
                } else {
                    if(status === 'NOT_FOUND') {
                        window.alert('No results - Please try again');
                    }
                }
            });
        }