【发布时间】：2015-12-05 05:15:43
【问题描述】：
.controller('MapCtrl', [
'$scope', '$http', '$location', '$window', '$filter', '$ionicLoading', '$compile','$timeout','$ionicPopup',
function($scope, $http, $location, $window, $filter, $ionicLoading, $compile, $timeout,$ionicPopup) {
$scope.favoriteStore = '';
$scope.Storetype = [{
name: "Nokia"
}, {
name: "Samsung"
}];
$scope.submit =function()
{
if($scope.favoriteStore == 'Nokia') {
alert($('#nokia').val());
} else {
alert($('#samsung').val());
}
}
$http.get('*****').success(function(data, dealers, response) {
function initialize() {
var serverData = data;
$scope.locations = [];
for (var i = 0; i < serverData.length; i++) {
var modal = [
data[i].Store_Name, data[i].S_Location.Latitude, data[i].S_Location.Longitude, i, 'images/arrow.svg', data[i]._id,data[i].Store_Type,data[i].Services];
$scope.locations.push(modal);
}
var locations = [
['Sakthi Nokia Store', '12.901599', '77.594563', '1', 'images/arrow.svg.svg', '55a78953815356700bee698f','Nokia','Interior Services,Exterior Services,Regular Services & Maintenance'],
['Google Mobile Center', '12.9165534', '77.5474802', '2', 'images/arrow.svg.svg', '55a786d1815356700bee6982','Nokia,Samsung','Software problem & updates,Interior Services'],
['Zig zag mobiles', '12.9033434', '77.5574802', '3', 'images/arrow.svg.svg', '55a786d1815356700bee6982','Samsung','Hardware Problem,Interior Services,Exterior Services,Other Services'],
['Guptha mobile Corner', '12.9165534', '77.5456742', '4', 'images/arrow.svg.svg', '55a786d1815356700bee6982','Nokia,Samsung','Regular Services & Maintenance'],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(12.9667, 77.5667),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, i;
for (i = 0; i < $scope.locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng($scope.locations[i][1], $scope.locations[i][2]),
map: map,
icon: $scope.locations[i][4],
animation: google.maps.Animation.DROP,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var compiled = $compile('<div><div>' + $scope.locations[i][0] + ' </div><div>' + $scope.locations[i][1] + ' </div><div>' + $scope.locations[i][2] + ' </div><div><button ng-click="getid(locations[' + i + '][5])">Get</button></div></div>')($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
infowindow.open(map, marker);
$scope.$apply();
}
})(marker, i));
}
$scope.getid = function(id) {
console.log(id)
}
$scope.map = map;
}
});
}
])<script type='text/javascript' src='https://fiddle.jshell.net/js/lib/dummy.js'></script>
<script type='text/javascript' src="https://code.jquery.com/jquery-2.0.2.js"></script>
<script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css">
<script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js"></script>
<ion-content ng-controller="MapCtrl">
<form data-ng-submit="submit()">
<ul>
<li ng-repeat="store in Storetype">
<label>{{store.name}}
<input type="radio" name="storetype" ng-model="$parent.favoriteStore" value="{{store.name}}" />
</label>
</li>
</ul>
<div ng-show="favoriteStore == 'Nokia'" style="padding:20px">
<select id="nokia" multiple="multiple">
<option value="Interior Services">Interior Services</option>
<option value="Exterior Services">Exterior Services</option>
<option value="Regular Services & Maintenance">Regular Services & Maintenance</option>
<option value="Software problem & updates">Software problem & updates</option>
<option value="Hardware Problem">Hardware Problem</option>
</select>
<br /><br />
<input type="submit" id="btnget" value="submit" />
</div>
<div ng-show="favoriteStore == 'Samsung'" style="padding:20px">
<select id="samsung" multiple="multiple">
<option value="Interior Services">Interior Services</option>
<option value="Exterior Services">Exterior Services</option>
<option value="Regular Services & Maintenance">Regular Services & Maintenance</option>
<option value="Software problem & updates">Software problem & updates</option>
<option value="Hardware Problem">Hardware Problem</option>
<option value="Other Services">Other Services</option>
</select>
<br /><br />
<input type="submit" id="btnget" value="Submit" />
</div>
</form>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<script type='text/javascript'>//<![CDATA[
$(function() {
$('#nokia').multiselect({
includeSelectAllOption: true
});
$('#samsung').multiselect({
includeSelectAllOption: true
});
});
</script>我已附上我的代码。我有四家商店在谷歌地图中正确显示，但我想根据选择过滤谷歌地图标记。这里我有商店类型及其服务，我需要根据这两个进行过滤。我有两个单选按钮，即诺基亚和三星。取决于提交按钮后出现的单选按钮选择服务，我需要过滤地图标记。示例：
案例 1：在单选按钮中，用户选择了诺基亚，并且在该服务列表中，用户检查了内部服务并提交。在这里，诺基亚我需要检查数据 [i]。Store_Type 和内部服务我需要检查数据[i] .服务
这个案例的答案应该只显示两个标记 1.Sakthi Nokia Store,2.Google Mobile Center
case2：在单选按钮中，用户选择了诺基亚，并且在该服务列表中，用户检查了内部服务、常规服务和维护并提交。在这里诺基亚我需要检查数据[i].Store_Type 和内部服务、常规服务和维护我需要检查 data[i].Services
这个案例的答案应该只显示两个标记 1.Sakthi Nokia Store,2.Google Mobile Center3.Guptha mobile Corner
案例 3：在单选按钮中，用户选择了三星，并且在该服务列表中，用户检查了内部服务并提交。这里三星我需要检查数据 [i].Store_Type 和内部服务我需要检查数据[i] .服务
这个案例的答案应该只显示两个标记 1.Google 移动中心 2.Zig zag 手机请有人帮帮我，我是这个谷歌地图 api 和 angularjs 的新手。
【问题讨论】：
标签： javascript angularjs google-maps google-maps-api-3 google-maps-markers