保存点击谷歌地图标记ID -重置图标上的下一个标记单击
Save Clicked Google Maps Marker ID – Reset Icon On Next Marker Click
我试图将引用保存到单击的Google Maps标记。目前我的代码是这样的:
- 单击标记。
- 检查标记具有的iconType (
data-icon-type
)(无论是Landmarks还是Projects)。 - 根据图标类型(
data-icon-type
),将图标切换为"活动"标记图标。
步骤1 - 3可以正常工作。但以下是我目前卡住的内容如下:
- 保存所单击标记(
data-marker-id
)的id。 - 当点击一个新的标记时,获得先前点击的标记的id,检查标记具有的iconType (
data-icon-type
)(无论是Landmarks还是Projects)。 - 将先前点击的标记图标重置为"非活动"标记图标。
- 设置新点击的标记图标为"活动"图标。
我应该指出,我正在使用高级自定义字段谷歌地图字段填充我的地图位置。
下面是渲染地图的各种函数:
/*
* new_map
*
* This function will render a Google Map onto the selected jQuery element
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param jQueryel (jQuery element)
* @return n/a
*/
function new_map(jQueryel) {
// var
var jQuerymarkers = jQueryel.find('.marker');
// vars
var args = {
minZoom: 12,
maxZoom: 17,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
};
// create map
var map = new google.maps.Map(jQueryel[0], args);
// add a markers reference
map.markers = [];
// add markers
jQuerymarkers.each(function() {
add_marker(jQuery(this), map);
});
// center map
center_map(map);
// return
return map;
}
/*
* add_marker
*
* This function will add a marker to the selected Google Map
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param jQuerymarker (jQuery element)
* @param map (Google Map object)
* @return n/a
*/
function add_marker(jQuerymarker, map) {
// var
var latlng = new google.maps.LatLng(jQuerymarker.attr('data-lat'), jQuerymarker.attr('data-lng'));
var markerID = jQuerymarker.attr('data-marker-id');
var cleanTitle = jQuerymarker.attr('data-clean-title');
var iconType = jQuerymarker.attr('data-icon-type');
var icon = {
url: jQuerymarker.attr('data-icon'), // url
};
// create marker
var marker = new google.maps.Marker({
position: latlng,
map: map,
id: markerID,
icon: icon
});
// add to array
map.markers.push(marker);
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
var identification;
if (jQuery('#box').hasClass('slide-right-active')) {
// Check to see what the previous icon was,
//then it swaps out the icon for the original icon
if (prevIconType == 'landmarks') {
console.log("second landmarks");
icon = {
url: 'Landmarks.png', // url
};
marker.setIcon(icon);
} else if (prevIconType == 'projects') {
console.log("second projects");
icon = {
url: 'Projects.png', // url
};
marker.setIcon(icon);
}
// Check to see what the icon the clicked marker has,
// then it swaps out the icon for the active icon
if (iconType === 'landmarks') {
icon = {
url: 'Landmarks-Active.png', // url
};
marker.setIcon(icon);
prevIconType = 'landmarks';
} else if (iconType === 'projects') {
icon = {
url: 'Projects-Active.png', // url
};
marker.setIcon(icon);
prevIconType = 'projects';
}
} else {
// Check to see what the icon the clicked marker has,
// then it swaps out the icon for the active icon
if (iconType === 'landmarks') {
icon = {
url: 'Landmarks-Active.png', // url
};
marker.setIcon(icon);
prevIconType = 'landmarks';
} else if (iconType === 'projects') {
icon = {
url: 'Projects-Active.png', // url
};
marker.setIcon(icon);
prevIconType = 'projects';
}
}
});
}
花了我一点时间,但我通过其他各种例子找到了它。一个对我有用的是:当点击其他
时改变谷歌地图标记图标下面是我的代码,用于在单击事件上交换标记。
google.maps.event.addListener(marker, 'click', (function(marker, i, center) {
var identification;
jQueryMarkerToolTip.hide();
return function() {
for (var j = 0; j < markers.length; j++) {
if (markers[j].iconType === 'landmarks') {
icon = {
url: 'Landmarks.png', // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
markers[j].setIcon(icon);
}
if (markers[j].iconType === 'projects') {
icon = {
url: 'Projects.png', // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
markers[j].setIcon(icon);
}
}
if (iconType === 'landmarks') {
icon = {
url: 'Landmarks-Active.png', // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
marker.setIcon(icon);
} else if (iconType === 'projects') {
icon = {
url: 'Projects-Active.png', // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
marker.setIcon(icon);
}
};
})(marker, i, center));
// add to array
markers.push(marker);
}
}
相关文章:
- 滚动到容器中的下一个元素-几乎到了
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 使用ajax将数据从一个步骤发送到下一个步骤的3步表单
- AngularJS&JSON-从Previous&下一个对象
- 使用向下箭头键(与tab键一样)聚焦下一个输入
- 来自文档或下一个静态父级的事件委派
- angularjs移除焦点上的活动类并添加到下一个项目
- 禁用旋转木马中的下一个按钮和上一个按钮
- 当按下一个键时,请多次按下不同的键
- 正在加载下一个帖子
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- 删除“;上一个“;以及“;下一个“;基于当前幻灯片
- 真正的下一个具有特定类的元素
- jquery步骤上的图标“;下一个“;以及“;上一个“;按钮
- 下一个上一个图标在猫头鹰转盘2中不起作用
- 保存点击谷歌地图标记ID -重置图标上的下一个标记单击
- 显示上一个和下一个图标在弹出图像
- 如何在单击复选框时显示下一个图标
- 滚动到下一个Div使用Jquery与上一个和下一个图标