我正在尝试保存对点击的Google地图标记的引用。目前我的代码是这样的：
data-icon-type）（标记或项目）。data-icon-type），将图标切换为“有效”状态。标记图标。步骤1 - 3工作正常。但以下是我目前所坚持的内容如下：
data-marker-id）。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';
}
}
});
}
答案 0 :(得分：0)
我花了一段时间，但我想通过其他各种例子来看。对我有用的是：Change Google Maps marker icon when clicking on other
这是我在点击事件中交换标记的代码。
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);
}
}