如何过滤谷歌地图标记在一个阵列中使用select？ [英] How to filter Google Maps markers in one array with select?
本文介绍了如何过滤谷歌地图标记在一个阵列中使用select？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的网站有一个阵列实施了谷歌地图，就像这样：
VAR gmarkers1 = [];
变种markers1 = [];markers1 = [
['0'，'标题'，52.4357808，4.991315699999973]
['1'，'标题'，52.4357808，4.991315699999973]
['2'，'标题'，52.4555687，5.039231599999994]
];
在这个例子中有3个标记，但在现实中也有很多。对于我而言，这是做的（一个数组）的唯一途径。
问：我希望能够这个数组有选择框里面进行过滤。因此，一个用户从选择和谷歌地图汽车只显示了一个属性标记（？）汽车。
标记都显示是这样的：
为（i = 0; I＆LT; markers1.length;我++）{
VAR类;
变种POS =新google.maps.LatLng（markers1 [I] [2]，markers1 [I] [3]）;
变种含量= markers1 [I] [1];
bounds.extend（POS）
MARKER1 =新google.maps.Marker（{
位置：POS机，
地图：地图，
图标：此搜索
}）; gmarkers1.push（MARKER1）;
// [开始] - 活动监听器中心查看并转到位置
google.maps.event.addListener（MARKER1，'点击'，（功能（MARKER1，内容）{
返回功能（）{
的console.log（'的GMarker 1被推'）
infowindow.setContent（内容）;
infowindow.open（地图，MARKER1）;
map.panTo（this.getPosition（））;
map.setZoom（15）;
}
}）（MARKER1，内容））;
}
在此输入code
先谢谢了。
解决方案
您必须添加类别作为标记属性。
markers1 = [
['0'，'标题1，52.4357808，4.991315699999973，'车']，
['1'，'名称2'，52.4357808，4.981315699999973，第三]，
['2'，'标题3'，52.4555687，5.039231599999994，'车']，
['3'，'标题4'，52.4555687，5.029231599999994，'第二']
];
创建标记。标记为对象，所以添加类物业。
VAR类别= markers1 [I] [4];
变种POS =新google.maps.LatLng（markers1 [I] [2]，markers1 [I] [3]）;
MARKER1 =新google.maps.Marker（{
位置：POS机，
地图：地图，
类别：类别，
图标：此搜索
}）;
和选择上的变化，呼叫功能是什么检查，如果为选择的类别是一样的。
/ **
*功能来过滤按类别标记
* /filterMarkers =功能（类别）
{
对于（i = 0; I＆LT; markers1.length;我++）{
标记= gmarkers1 [I] //如果是同一类或类别不挑
如果（marker.category == ||类category.length == 0）
{
marker.setVisible（真）;
}
//类别不匹配
其他
{
marker.setVisible（假）;
}
}
}
工作实例
\r
\r\r
\r VAR gmarkers1 = [];\r
变种markers1 = [];\r
VAR信息窗口=新google.maps.InfoWindow（{\r
内容：''\r
}）;\r
\r
//我们的标志\r
markers1 = [\r
['0'，'标题1，52.4357808，4.991315699999973，'车']，\r
['1'，'名称2'，52.4357808，4.981315699999973，第三]，\r
['2'，'标题3'，52.4555687，5.039231599999994，'车']，\r
['3'，'标题4'，52.4555687，5.029231599999994，'第二']\r
];\r
\r
/ **\r
*函数来初始化地图\r
* /\r
\r
函数初始化（）{\r
VAR中心=新google.maps.LatLng（52.4357808，4.991315699999973）;\r
VAR的MapOptions = {\r
变焦：12，\r
中心：中心，\r
mapTypeId设为：google.maps.MapTypeId.TERRAIN\r
};\r
\r
地图=新google.maps.Map（的document.getElementById（'地图画布'）的MapOptions）;\r
对于（i = 0; I＆LT; markers1.length;我++）{\r
addMarker（markers1 [I]）;\r
}\r
}\r
\r
/ **\r
*功能添加标记映射\r
* /\r
\r
功能addMarker（标记）{\r
变种类别=标记[4];\r
VAR标题=标记[1];\r
VAR POS =新google.maps.LatLng（标记[2]，标志[3]）;\r
变种含量=标记[1];\r
\r
MARKER1 =新google.maps.Marker（{\r
标题：标题，\r
位置：POS机，\r
类别：类别，\r
地图：地图\r
}）;\r
\r
gmarkers1.push（MARKER1）;\r
\r
//标记点击监听器\r
google.maps.event.addListener（MARKER1，'点击'，（功能（MARKER1，内容）{\r
返回功能（）{\r
的console.log（'的GMarker 1被推'）;\r
infowindow.setContent（内容）;\r
infowindow.open（地图，MARKER1）;\r
map.panTo（this.getPosition（））;\r
map.setZoom（15）;\r
}\r
}）（MARKER1，内容））;\r
}\r
\r
/ **\r
*功能来过滤按类别标记\r
* /\r
\r
filterMarkers =功能（类）{\r
对于（i = 0; I＆LT; markers1.length;我++）{\r
标记= gmarkers1 [I]\r
//如果是同一类或类别不挑\r
如果（marker.category ==类别|| category.length === 0）{\r
marker.setVisible（真）;\r
}\r
//类别不匹配\r
其他{\r
marker.setVisible（假）;\r
}\r
}\r
}\r
\r
//初始化地图\r
初始化（）; \r
＃地图帆布{\r
宽度：500像素;\r
高度：500像素;\r
} \r
＆LT;脚本src=\"https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee&dummy=dummy.js\"></script>\r
＆LT; DIV ID =地图画布＆GT;＆LT; / DIV＆GT;\r
＆LT;选择一个id =类型的onchange =filterMarkers（THIS.VALUE）;＆GT;\r
＆LT;期权价值=＆gt;请选择类别＆LT; /选项＆GT;\r
＆LT;期权价值=第二＆gt;第二个＆LT; /选项＆GT;\r
＆LT;期权价值=车＆GT;汽车＆LT; /选项＆GT;\r
＆LT;期权价值=第三＆GT;三＆LT; /选项＆GT;\r
＆LT; /选择＆GT; \r
编辑@Myoji评论
多个类别，每个标记
要对每个标记使用多个类，只需将它们添加阵列和编辑如果条件对 filterMarkers 。
markers1 = [
['0'，'标题1，52.4357808，4.991315699999973，['汽车'，'第二次']，
['1'，'名称2'，52.4357808，4.981315699999973，['第三']]
['2'，'标题3'，52.4555687，5.039231599999994，['汽车'，'第三']，
['3'，'标题4'，52.4555687，5.029231599999994，['第二']
];
和 filterMarkers 是
/ **
*功能来过滤按类别标记
* /filterMarkers =功能（类别）
{
对于（i = 0; I＆LT; markers1.length;我++）{
标记= gmarkers1 [I] //如果是同一类或类别不挑
如果（（typeof运算marker.category =='对象'和;＆安培; marker.category.indexOf（类）＆GT; = 0）|| category.length == 0）{
{
marker.setVisible（真）;
}
//类别不匹配
其他
{
marker.setVisible（假）;
}
}
}
工作实例
\r
\r\r
\r VAR gmarkers1 = [];\r
变种markers1 = [];\r
VAR信息窗口=新google.maps.InfoWindow（{\r
内容：''\r
}）;\r
\r
//我们的标志\r
markers1 = [\r
['0'，'标题1，52.4357808，4.991315699999973，['汽车'，'第二次']，\r
['1'，'名称2'，52.4357808，4.981315699999973，['第三']]\r
['2'，'标题3'，52.4555687，5.039231599999994，['汽车'，'第三']，\r
['3'，'标题4'，52.4555687，5.029231599999994，['第二']\r
];\r
\r
/ **\r
*函数来初始化地图\r
* /\r
\r
函数初始化（）{\r
VAR中心=新google.maps.LatLng（52.4357808，4.991315699999973）;\r
VAR的MapOptions = {\r
变焦：12，\r
中心：中心，\r
mapTypeId设为：google.maps.MapTypeId.TERRAIN\r
};\r
\r
地图=新google.maps.Map（的document.getElementById（'地图画布'）的MapOptions）;\r
对于（i = 0; I＆LT; markers1.length;我++）{\r
addMarker（markers1 [I]）;\r
}\r
}\r
\r
/ **\r
*功能添加标记映射\r
* /\r
\r
功能addMarker（标记）{\r
变种类别=标记[4];\r
VAR标题=标记[1];\r
VAR POS =新google.maps.LatLng（标记[2]，标志[3]）;\r
变种含量=标记[1];\r
\r
MARKER1 =新google.maps.Marker（{\r
标题：标题，\r
位置：POS机，\r
类别：类别，\r
地图：地图\r
}）;\r
\r
gmarkers1.push（MARKER1）;\r
\r
//标记点击监听器\r
google.maps.event.addListener（MARKER1，'点击'，（功能（MARKER1，内容）{\r
返回功能（）{\r
的console.log（'的GMarker 1被推'）;\r
infowindow.setContent（内容）;\r
infowindow.open（地图，MARKER1）;\r
map.panTo（this.getPosition（））;\r
map.setZoom（15）;\r
}\r
}）（MARKER1，内容））;\r
}\r
\r
/ **\r
*功能来过滤按类别标记\r
* /\r
\r
filterMarkers =功能（类）{\r
对于（i = 0; I＆LT; markers1.length;我++）{\r
标记= gmarkers1 [I]\r
//如果是同一类或类别不挑\r
如果（（typeof运算marker.category =='对象'和;＆安培; marker.category.indexOf（类）＆GT; = 0）|| category.length == 0）{\r
marker.setVisible（真）;\r
}\r
//类别不匹配\r
其他{\r
marker.setVisible（假）;\r
}\r
}\r
}\r
\r
//初始化地图\r
初始化（）; \r
＃地图帆布{\r
宽度：500像素;\r
高度：500像素;\r
} \r
＆LT;脚本src=\"https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee&dummy=dummy.js\"></script>\r
＆LT; DIV ID =地图画布＆GT;＆LT; / DIV＆GT;\r
＆LT;选择一个id =类型的onchange =filterMarkers（THIS.VALUE）;＆GT;\r
＆LT;期权价值=＆gt;请选择类别＆LT; /选项＆GT;\r
＆LT;期权价值=第二＆gt;第二个＆LT; /选项＆GT;\r
＆LT;期权价值=车＆GT;汽车＆LT; /选项＆GT;\r
＆LT;期权价值=第三＆GT;三＆LT; /选项＆GT;\r
＆LT; /选择＆GT; \r
I have a google maps implemented in my site with one array, like so:
var gmarkers1 = [];
var markers1 = [];
markers1 = [
['0', 'Title', 52.4357808, 4.991315699999973],
['1', 'Title', 52.4357808, 4.991315699999973],
['2', 'Title', 52.4555687, 5.039231599999994],
];
In this example there are 3 markers, but in reality there are a lot more. For my purpose, this is the only way to do it (one array).
Question: I want to be able to filter inside this array with a selectbox. So a user selects "car" from a select and Google Maps only shows the markers with a property (?) "car".
The Markers are shown like this:
for (i = 0; i < markers1.length; i++) {
var category;
var pos = new google.maps.LatLng(markers1[i][2], markers1[i][3]);
var content = markers1[i][1];
bounds.extend(pos);
marker1 = new google.maps.Marker({
position: pos,
map: map,
icon: image1
});
gmarkers1.push(marker1);
// [START]-Event listener to center view and go to position
google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
return function() {
console.log('Gmarker 1 gets pushed')
infowindow.setContent(content);
infowindow.open(map, marker1);
map.panTo(this.getPosition());
map.setZoom(15);
}
})(marker1, content));
}
enter code here
Thanks in advance.
解决方案
You must add category as marker property.
markers1 = [
['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'],
['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'],
['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'],
['3', 'Title 4', 52.4555687, 5.029231599999994, 'second']
];
Create marker. Marker is object, so add category as property.
var category = markers1[i][4];
var pos = new google.maps.LatLng(markers1[i][2], markers1[i][3]);
marker1 = new google.maps.Marker({
position: pos,
map: map,
category: category,
icon: image1
});
And on select change, call function what checks if category is same as selected.
/**
* Function to filter markers by category
*/
filterMarkers = function(category)
{
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if(marker.category == category || category.length == 0)
{
marker.setVisible(true);
}
// Categories don't match
else
{
marker.setVisible(false);
}
}
}
Working example
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
// Our markers
markers1 = [
['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'],
['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'],
['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'],
['3', 'Title 4', 52.4555687, 5.029231599999994, 'second']
];
/**
* Function to init map
*/
function initialize() {
var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
var mapOptions = {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
}
/**
* Function to add marker to map
*/
function addMarker(marker) {
var category = marker[4];
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
marker1 = new google.maps.Marker({
title: title,
position: pos,
category: category,
map: map
});
gmarkers1.push(marker1);
// Marker click listener
google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
return function () {
console.log('Gmarker 1 gets pushed');
infowindow.setContent(content);
infowindow.open(map, marker1);
map.panTo(this.getPosition());
map.setZoom(15);
}
})(marker1, content));
}
/**
* Function to filter markers by category
*/
filterMarkers = function (category) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
}
// Init map
initialize();
#map-canvas {
width: 500px;
height: 500px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee&dummy=dummy.js"></script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
<option value="">Please select category</option>
<option value="second">second</option>
<option value="car">car</option>
<option value="third">third</option>
</select>
EDIT for @Myoji comment
Multiple categories on each marker
To use multiple categories on each marker, just add them as array and edit if condition on filterMarkers.
markers1 = [
['0', 'Title 1', 52.4357808, 4.991315699999973, ['car', 'second']],
['1', 'Title 2', 52.4357808, 4.981315699999973, ['third']],
['2', 'Title 3', 52.4555687, 5.039231599999994, ['car', 'third']],
['3', 'Title 4', 52.4555687, 5.029231599999994, ['second']]
];
And filterMarkers would be
/**
* Function to filter markers by category
*/
filterMarkers = function(category)
{
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if((typeof marker.category == 'object' && marker.category.indexOf(category) >= 0) || category.length == 0){
{
marker.setVisible(true);
}
// Categories don't match
else
{
marker.setVisible(false);
}
}
}
Working example
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
// Our markers
markers1 = [
['0', 'Title 1', 52.4357808, 4.991315699999973, ['car', 'second']],
['1', 'Title 2', 52.4357808, 4.981315699999973, ['third']],
['2', 'Title 3', 52.4555687, 5.039231599999994, ['car', 'third']],
['3', 'Title 4', 52.4555687, 5.029231599999994, ['second']]
];
/**
* Function to init map
*/
function initialize() {
var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
var mapOptions = {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
}
/**
* Function to add marker to map
*/
function addMarker(marker) {
var category = marker[4];
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
marker1 = new google.maps.Marker({
title: title,
position: pos,
category: category,
map: map
});
gmarkers1.push(marker1);
// Marker click listener
google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
return function () {
console.log('Gmarker 1 gets pushed');
infowindow.setContent(content);
infowindow.open(map, marker1);
map.panTo(this.getPosition());
map.setZoom(15);
}
})(marker1, content));
}
/**
* Function to filter markers by category
*/
filterMarkers = function (category) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if((typeof marker.category == 'object' && marker.category.indexOf(category) >= 0) || category.length == 0){
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
}
// Init map
initialize();
#map-canvas {
width: 500px;
height: 500px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee&dummy=dummy.js"></script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
<option value="">Please select category</option>
<option value="second">second</option>
<option value="car">car</option>
<option value="third">third</option>
</select>
这篇关于如何过滤谷歌地图标记在一个阵列中使用select？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
