【发布时间】：2017-03-21 02:51:53
【问题描述】：
我正在尝试保存对单击的 Google 地图标记的引用。目前我的代码是这样工作的：
- 点击标记。
- 检查标记具有哪个 iconType (
data-icon-type)（地标或项目）。 - 根据标记的 iconType (
data-icon-type)，将图标切换为“活动”标记图标。
步骤 1 - 3 工作正常。但以下是我目前坚持的如下：
- 保存点击标记的 id (
data-marker-id)。 - 单击新标记时，获取先前单击的标记的 ID，检查标记具有的 iconType (
data-icon-type)（地标或项目）。 - 将之前单击的标记图标重置为“非活动”标记图标。
- 将新点击的标记图标设置为“活动”图标。
我应该指出，我正在使用高级自定义字段 Google 地图字段来填充我的地图位置。
以下是渲染地图的各种函数：
/*
* 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';
}
}
});
}
【问题讨论】：
标签： javascript jquery google-maps google-maps-api-3 google-maps-markers