我正在尝试在AngularJS中创建一个具有多个位置的应用,然后点击其中一个,它会将您带到Google地图中的位置。我在点击位置时重新定位地图时遇到问题。我想我需要添加一个事件监听器,但我不确定。创建地图的代码位于initialize()
。这是代码:
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
$scope.ASiteLocs = [Locations Contained Here...];
$scope.SSiteLocs = [Locations Contained Here...];
$scope.SiteLocs = $scope.SSiteLocs.concat($scope.ASiteLocs);
angular.forEach($scope.SiteLocs, function(location) {
var clength = location.Point.coordinates.length;
if (location.Point.coordinates.substring(clength - 2, clength) === ",0") {
location.Point.coordinates = location.Point.coordinates.substring(0, clength - 2).split(",");
Lat = location.Point.coordinates[0];
Lon = location.Point.coordinates[1];
Com = ",";
location.Point.coordinates = Lon.concat(Com, Lat);
}
angular.forEach($scope.SSiteLocs, function(object) {
object.carrier = 'Sprint';
});
angular.forEach($scope.ASiteLocs, function(object) {
object.carrier = 'AT&T';
});
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.894465, -88.460500),
zoom: 12
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: site.Point.coordinates,
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
window.setTimeout(function() {
map.panTo(site.Point.coordinates);
}, 1000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(site.Point.coordinates);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$scope.headerShow = false;
$scope.tableAttrs = {
hide: false
};
});
和HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map-canvas {
height: 100%
}
</style>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="google-maps@1.0.0" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="map.js"></script>
<script src="ShowHide.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0wdLb9-Os4YVxn_JR2sY08xEN-1aJkMM"></script>
<title>Site ID</title>
</head>
<body link="white" vlink="white">
<pin>Site ID</pin>
<center>
<div id="header" ng-hide="tableAttrs.hide">Site Finder</div>
<div ng-controller="firstCtrl">
<input type="text" ng-model="search" border="3" placeholder="Please enter site name..." ng-hide="tableAttrs.hide">
<div link="white" vlink = "white">
<button id="btn2" ng-click="tableAttrs.hide = !tableAttrs.hide" ng-hide="!tableAttrs.hide" class="button-Overlay">Back To Search</button></div>
<table border="1" width="100%" ng-hide="tableAttrs.hide" class="buttonOverlay">
<thead>
<tr>
<td><center>Name</center></td>
<td>Carrier</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="site in SiteLocs | filter : search">
<td>
<button id="btn1" ng-click="tableAttrs.hide = !tableAttrs.hide">
{{site.name}}
</button>
</td>
<td>
{{site.carrier}}
</td>
</tr>
</tbody>
</table>
</div>
</center>
<div id="map-canvas" ng-show="!hideAttr"></div>
</body>
</html>
答案 0 :(得分:1)
点击其中一个位置时尝试使用此功能:
map.setCenter(new google.maps.LatLng( lat, lon ) );
您可能需要一种方法将位置的lat / lon传递给脚本。