与角谷歌 - 地图AngularJS：添加标记通过FOMR找我吧 [英] AngularJS with angular-google-maps: Add Marker through fomr and Find me
问题描述
我想从 http://nlaplante.github.io/angular重现的例子-Google-地图/ ，因为它90％的我想要什么。
但到目前为止，我并没有太多的成功，它可以找到我的位置，因为我可以控制台登录，但它并没有放置标记在地图上。而在addMarker功能似乎工作，但控制台日志returnig [对象] [对象]，而不是该输入具有价值。
我想要做的是通过纬度+ LNG的形式添加标记，并添加标记，当我preSS了找我按钮。
在$ C C I到目前为止有：
HTML：
＆LT; HTML NG-应用=typeApp级=无JS＆GT;...＆LT;机身NG控制器=MainCtrl＆GT;... ＆LT;一类=按钮NG点击=findMe（）的href =＆GT;查找ME＆LT; / A＆GT; ＆LT;表类=表＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;输入类型=数字级=NG-模式=markerLatNAME =markerLat所需=＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=数字级=NG-模式=markerLngNAME =markerLng所需=＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;按钮类=按钮NG点击=addMarker（）＆gt;添加＆LT; /按钮＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
JS
使用严格的;VAR模块= angular.module（'typeApp'，['ngCookies'，
ngResource'，
ngSanitize'，
ngRoute'，
'谷歌地图'，
pageslide-指令
]）;module.config（函数（$ routeProvider）{
$ routeProvider
。什么时候（'/'， {
templateUrl：意见/ main.html中，
控制器：'MainCtrl
}）
。当（'/登录'，{
templateUrl：意见/ login.html的，
控制器：'loginCtrl
}）
。除此以外（{
redirectTo：可以找到/404.html
}）;
}）;module.controller（'MainCtrl'，函数（$范围）{ //默认位置
$ scope.center = {
纬度：45，
经度：-73
}; $ scope.geolocationAvailable = navigator.geolocation？真假; $ scope.latitude = NULL;
$ scope.longitude = NULL; $ scope.zoom = 6; $ scope.styles = [
{
造型器：
{色相：＃00ffe6}，
{饱和度：-20}
]
}，{
类型特征：道，
元素类型：几何，
造型器：
{亮度：100}，
{能见度：简化}
]
}，{
类型特征：道，
元素类型：标签，
造型器：
{能见度：关}
]
}
]; $ scope.markers = []; $ scope.markerLat = NULL;
$ scope.markerLng = NULL; $ scope.addMarker =功能（）{ $ scope.markers.push（{
纬度：parseFloat（$ scope.markerLat）
经度：parseFloat（$ scope.markerLng）
}）; $ scope.markerLat = NULL;
$ scope.markerLng = NULL;
的console.log（'设备补充：'+ $ scope.markers）;
}; $ scope.findMe =功能（）{ 如果（$ scope.geolocationAvailable）{ navigator.geolocation.getCurrentPosition（功能（位置）{ $ scope.center = {
纬度：position.coords.latitude，
经度：position.coords.longitude
}; $ $范围适用于（）。
的console.log（'找到了你：'+ position.coords.latitude +'||'+ position.coords.longitude）;
}，函数（）{ }）;
}
};}）;
的的console.log（'找到了你：'+ position.coords.latitude +'||'+ position.coords.longitude）; 输出坐标我的，但地图不更新。
在的console.log（'设备加：'+ $ scope.markers）; 输出[对象] [对象]我每次单击添加标记按钮。
任何帮助将是非常美联社preciated。谢谢你。
这code是不错的。你只是缺少一个变量。
而不是$ scope.center，你必须增加$ scope.map.center像这样：
$ scope.map.center = {纬度：position.coords.latitude，经度：position.coords.longitude};
同为scope.markers。尝试scope.map.markers。没有测试，但它应该工作。
I am trying to reproduce the example from http://nlaplante.github.io/angular-google-maps/ because it does 90% of what i want.
But so far i'm not having much success, it can find my location because i can console log it, but it doesn't place a marker on the map.. And the "addMarker" function seems to work but the console log is returnig [Object][Object] and not the value that the input has..
What i want to do is add markers through a lat + lng form and also add a marker when i press the "find me" button.
The code i have so far:
HTML:
<html ng-app="typeApp" class="no-js">
...
<body ng-controller="MainCtrl">
...
<a class="button" ng-click="findMe()" href="">Find me</a>
<table class="table">
<tr>
<td><input type="number" class="" ng-model="markerLat" name="markerLat" required=""></td>
<td><input type="number" class="" ng-model="markerLng" name="markerLng" required=""></td>
<td><button class="button" ng-click="addMarker()">Add</button></td>
</tr>
</table>
JS
'use strict';
var module = angular.module('typeApp', ['ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'google-maps',
'pageslide-directive'
]);
module.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'loginCtrl'
})
.otherwise({
redirectTo: '/404.html'
});
});
module.controller('MainCtrl', function ($scope) {
//Default location
$scope.center = {
latitude: 45,
longitude: -73
};
$scope.geolocationAvailable = navigator.geolocation ? true : false;
$scope.latitude = null;
$scope.longitude = null;
$scope.zoom = 6;
$scope.styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
$scope.markers = [];
$scope.markerLat = null;
$scope.markerLng = null;
$scope.addMarker = function () {
$scope.markers.push({
latitude: parseFloat($scope.markerLat),
longitude: parseFloat($scope.markerLng)
});
$scope.markerLat = null;
$scope.markerLng = null;
console.log('Maker add: ' + $scope.markers);
};
$scope.findMe = function () {
if ($scope.geolocationAvailable) {
navigator.geolocation.getCurrentPosition(function (position) {
$scope.center = {
latitude: position.coords.latitude,
longitude: position.coords.longitude
};
$scope.$apply();
console.log('Found You: ' + position.coords.latitude + ' || ' + position.coords.longitude);
}, function () {
});
}
};
});
The console.log('Found You: ' + position.coords.latitude + ' || ' + position.coords.longitude); outputs my coordinates but the map doesn't update.
The console.log('Maker add: ' + $scope.markers); outputs [Object][Object] each time i click in the add marker button.
Any help would be very appreciated. Thanks.
this code is good. You're only missing one variable.
Instead of $scope.center, you have to add $scope.map.center like so:
$scope.map.center = {latitude: position.coords.latitude, longitude: position.coords.longitude};
Same for scope.markers. Try scope.map.markers. Haven't tested but it should work.
这篇关于与角谷歌 - 地图AngularJS：添加标记通过FOMR找我吧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
