Google Maps Angular Js

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

您需要在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。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

温泉UI和Angular JS Google Maps

来自分类Dev

Angular Js和Google Maps API ngGeolocation

来自分类Dev

Blazor:Google Maps JS API

来自分类Dev

angular-google-maps,访问常规的Google Maps API

来自分类Dev

Angular-google-maps搜索框

来自分类Dev

Angular Google Maps信息窗口HTML

来自分类Dev

在Angular-Google-Maps中添加标记

来自分类Dev

Google Maps for Angular指令无法正常运行

来自分类Dev

Angular-google-maps搜索框

来自分类Dev

Typescript或Angular 2中的Google Maps

来自分类Dev

Google Maps-GeoJSON.js-替换光标

来自分类Dev

Google Maps JS示例未显示

来自分类Dev

外部js文件中的Google Maps?

来自分类Dev

Ember.js中的Google Maps

来自分类Dev

如何从Google Maps JS API获取MapPanes

来自分类Dev

Google Maps JS示例未显示

来自分类Dev

自动完成的Google Maps JS错误

来自分类Dev

Google MAPS JS API 未加载

来自分类Dev

angular-google-maps与angular-ui / ui-map

来自分类Dev

Angular Universal不适用于Angular Google Maps

来自分类Dev

Google Maps App:在 Google Drive 上托管 .js 文件

来自分类Dev

ReferenceError:使用angular-google-maps时未定义_

来自分类Dev

使用Angular 2连接Google Maps Nativescript插件

来自分类Dev

为什么对angular-google-maps提供程序的测试失败?

来自分类Dev

触摸事件不适用于Angular中的Google Maps

来自分类Dev

标记的angular2-google-maps点击事件

来自分类Dev

如何使用angular-google-maps <markers>指令?

来自分类Dev

使用Angular在页面加载时访问Google Maps API

来自分类Dev

在angular-google-maps中将地址转换为纬度/经度