Question

这里我有信息窗口的地图标记。在信息窗口我需要添加一个按钮。当我点击该按钮时，它应该根据标记点击传递id值可以任何人帮助我，我已经添加了我的fiddele {{ 3}}

＆＃13;

//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
var cities = [
    { 
	    id:'1',
        city: 'Toronto',
        desc: 'This is the best city in the world!',
        lat: 43.7000,
        long: -79.4000
    },
    {
	    id:'2',
        city: 'New York',
        desc: 'This city is aiiiiite!',
        lat: 40.6700,
        long: -73.9400
    },
    {
	     id:'3',
        city: 'Chicago',
        desc: 'This is the second best city in the world!',
        lat: 41.8819,
        long: -87.6278
    },
    {
	     id:'4',
        city: 'Los Angeles',
        desc: 'This city is live!',
        lat: 34.0500,
        long: -118.2500
    },
    {
	     id:'5',
        city: 'Las Vegas',
        desc: 'This city is live!',
        lat: 36.0800,
        long: -115.1522
    }
];

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function (info) {
        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat, info.long),
            title: info.city
        });
        marker.content = '<div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div><div class="infoWindowContent"><button type="button" value="Get id" name="Book Now" ng-click="getid(' + info.id + ')>get</button></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);
    }
    $scope.getid =function(id)
	{
	console.log(id);
	}
    for (i = 0; i < cities.length; i++) {
        createMarker(cities[i]);
    }

    $scope.openInfoWindow = function (e, selectedMarker) {
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }




    $scope.clearMarkers = function() {
      for (var i = 0; i < $scope.markers.length; i++) {
        $scope.markers[i].setMap(null);
      }
      $scope.markers.length = 0;
    }



    $scope.filterMarkers = function() {
       //1.select filtered cities
       var filteredCities;
       var cityDesc = $scope.data.singleSelect;
       if(cityDesc == '0') {
          filteredCities = cities;
       }
       else {
          filteredCities = cities.filter(function(c){
            if(c.desc == cityDesc)
               return c; 
          });
       }  
       //2.update markers on map
       $scope.clearMarkers();
       for (i = 0; i < filteredCities.length; i++) {
        createMarker(filteredCities[i]);
       }
    }

});

＆＃13;

<div ng-app="mapsApp" ng-controller="MapCtrl">
        <div id="map"></div>
        <br><br>
        <label>Filter Marker </label><br>
        <select name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers()">
            <option value="0">all</option>
            <option value="This is the best city in the world!">This is the best city in the world!</option>
            <option value="This city is aiiiiite">This city is aiiiiite</option>
            <option value="This is the second best city in the world!">This is the second best city in the world!</option>
            <option value="This city is live!">This city is live!</option>
        </select><br>
        <div id="class" ng-repeat="marker in markers | orderBy : 'title'">
            <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
        </div>
    </div>

＆＃13;

Answer 1

提供的示例有两个问题：

1）第一个是拼写错误，在$hover_img.css({ 'transform': 'matrix('+ scale_value +', 0, 0, '+ scale_value +', ' + scaled_x_perc/100*page_width + ', ' + scaled_y_perc/100*page_height + ')' });表达式中缺少结束双引号，而不是ng-click它被称为ng-click="getid(' + info.id + ')

2）第二个，由于ng-click="getid(' + info.id + ')"的动态特性，google.maps.InfoWindow属性需要为compiled，否则content将不会被触发。

总而言之，您只需将ng-click函数替换为：

即可

createMarker

注意：不建议在中执行DOM操作控制器，为此目的更喜欢指令。所以你可以考虑＆gt;为信息窗口创建指令

Modified JSFiddle

谷歌地图信息窗口按钮没有显示？

1 个答案: