gpt4 book ai didi

jquery - 如何使用 angularjs 中的下拉值过滤谷歌地图标记?

转载 作者:行者123 更新时间:2023-12-03 23:06:44 28 4
gpt4 key购买 nike

我是 Angular 和谷歌地图的新手。这里我有 5 个标记,我想使用该下拉值过滤这些标记,请任何人都可以帮助我。

示例:如果我选择“这是世界上最好的城市!”下拉 map 中应仅显示一个标记,即多伦多

如果我选择这个城市在下拉 map 中应该显示两个标记,即洛杉矶、拉斯维加斯

我已经添加了我的demo

/Data
var cities = [
{
city : 'Toronto',
desc : 'This is the best city in the world!',
lat : 43.7000,
long : -79.4000
},
{
city : 'New York',
desc : 'This city is aiiiiite!',
lat : 40.6700,
long : -73.9400
},
{
city : 'Chicago',
desc : 'This is the second best city in the world!',
lat : 41.8819,
long : -87.6278
},
{
city : 'Los Angeles',
desc : 'This city is live!',
lat : 34.0500,
long : -118.2500
},
{
city : 'Las Vegas',
desc : 'This city is live!',
lat : 36.0800,
long : -115.1522
}
];

//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {

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.city + '</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');
}

});
 #map {
height:420px;
width:600px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom:0;
margin-top: 0;
}
<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">
<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>

最佳答案

这就是我的实现方式。我只会编写要执行的步骤(算法),而不是实际的代码......

1) 初始状态:下拉列表中未选择任何内容 -> 渲染所有标记(通过循环 for (i = 0; i < cities.length; i++){ createMarker(cities[i]);} )

2)用户选择一些下拉值

3) 清除所有标记 -> map 没有标记

4)按下拉列表中的值过滤城市

5) 仅为过滤后的城市渲染标记:for (i = 0; i < filteredCities.length; i++){ createMarker(cities[i]);}

6) 现在您的 map 仅显示已过滤城市的标记

我不知道 GMaps API 足以告诉您如何删除标记,但它应该很容易:)

关于jquery - 如何使用 angularjs 中的下拉值过滤谷歌地图标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33820419/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com