我正在处理一个页面,该页面具有包含许多标记的地图,并且标记标题的侧面有一个列表。这个例子帮助我入门。http://jsfiddle.net/svigna/pc7Uu/
我具有与每个标记位置有关的图像和说明,仅当单击关联的标记时,才希望在边列表中显示这些图像和说明。
关于如何实现这种逻辑有什么想法吗?谢谢。
这是我的HTML
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
<a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
<img ng-src="{{marker.image}}" alt="\{\{album.album\}\} Cover Image" width="300px;" height="300px;">
</div>
</div>
这是我的角度
//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
var mapOptions = {
zoom: 9,
center: new google.maps.LatLng(10.51, 7.432),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow({
maxWidth: 200
});
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.location,
image: info.img
});
marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}
$scope.openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
});
这是我的JSON
var cities = [
{
location : 'Unguwar Rimi',
desc : "<div id='hook' class='image'><img src=\"images/wells/KA KAF 001 Unguwar Rimi/IMG_4569.JPG\"><br><strong>Kaduna, Nigeria</strong><br>Village: Unguwar Rimi<br>Completed: 2011<br><p>'This borehole is a good blessing, our labor and stress is reduced.'</p></div>",
img: "images/wells/KA KAF 001 Unguwar Rimi/IMG_4569.JPG",
lat : 10.52,
long : 7.43
},
{
location : 'Gidan Bege Kadarko Kagoro',
desc : "<div id='hook' class='image'><img src=\"images/wells/KA KAU 001 Gidon Bege Kadarko Kagoro/IMG_4556.JPG\"><br><strong>Kaduna, Nigeria</strong><br>Village: Unguwar Rimi<br>Completed: 2008<br><p>'God is great, the village no longer has a water problem and we never run short of water.'</p></div>",
img: "images/wells/KA KAU 001 Gidon Bege Kadarko Kagoro/IMG_4556.JPG",
lat : 10.53,
long : 7.27
},
{
location : 'ECWA Seminary Kagoro',
desc : "<div id='hook' class='image'><img src=\"images/wells/KA KAU 002 ECWA Seminary Kagoro/IMG_8123.JPG\"><br><strong>Kaduna, Nigeria</strong><br>Village: ECWA Seminary Kagoro<br>Completed: 2008<br><p>'God is our Savior. He blessed us with this borehole which provides water to our staff and students'</p></div>",
img: "images/wells/KA KAU 002 ECWA Seminary Kagoro/IMG_8123.JPG",
lat : 9.69,
long : 8.39
}
];
您需要在click事件中将范围变量设置为某种值。
在您的控制器中:
$scope.selectedMarker = {};
// etc
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
$scope.selectedMarker = marker;
$scope.$apply();
infoWindow.open($scope.map, marker);
});
在您看来,您可以:
<h1>{{selectedMarker.title}}</h1>
这是完整的演示:http : //jsfiddle.net/pc7Uu/194/
另外,如果要在所包含的angular版本(1.1.1)上显示HTML(标记的内容),则还需要包含ngSanitize。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句