谷歌地图 Angular Js

Question

我正在处理一个包含许多标记的地图和标记标题一侧的列表的页面。这个例子帮助我入门。 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
}
];

Answer 1

你需要在点击事件中设置一个范围变量。

在您的控制器中：

     $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。

http://jsfiddle.net/xVGP5/1/