无法在更改事件中获得不同的图标
Cannot get a different Icon in Google map on change event
我是Google API V3的新手。我想更改缩放事件上的图标。完整的代码正在按预期运行,这是我给出地图更改事件以捕获缩放更改的最后一位,以便我可以将图标从简单的圆圈更改为Google标准的红色图标。请审阅并提出更正建议,非常感谢。
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
var infowindow;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(20, 0);
var myOptions = {
zoom: 3,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("worldcities.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.65,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.25,
map: map,
center: latlng,
radius: parseInt(markers[i].getAttribute("population"))/25
};
var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("population"), markers[i].getAttribute("countrycode"), markers[i].getAttribute("region"));
var onekmcircle = new google.maps.Circle(circleOptions);
}
});
}
function createMarker(name, latlng, popl, cntry, rgon) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 2
},
title: name});
var contentstring = '<b>'+name+'</b>'+'<br>Population: '+popl+'<br>Country: '+cntry+'<br>Region: '+rgon;
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: contentstring});
infowindow.open(map, marker);
var zoomLevel = map.getZoom();
map.setCenter(marker.getPosition());
if (zoomLevel<6)
{
map.setZoom(6);
}
});
return marker;
}
google.maps.event.addListener(map, 'zoom_changed', function() {
var url ='http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var icon = google.maps.MarkerImage(url);
var currentZoom = map.getZoom();
if (currentZoom >9){
for(i=0; i< markers.length; i++ ) {
markers[i].setIcon(icon);
}
}
});
你去...我为您修复了您的代码...你有一些错误。 最大的问题是您没有将创建的标记保存到数组中以在事件侦听器上循环。
我添加了 gMarker 数组。 我在您网站的控制台中运行了代码,它起作用了。 如果您有任何问题,请告诉我。
var infowindow;
var map;
var gMarkers=[];
function initialize() {
var myLatlng = new google.maps.LatLng(20, 0);
var myOptions = {
zoom: 3,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("worldcities.xml", function(data) {
markers = data.documentElement.getElementsByTagName("marker");
});
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
var circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.65,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.25,
map: map,
center: latlng,
radius: parseInt(markers[i].getAttribute("population"))/25
};
gMarkers.push(createMarker(markers[i].getAttribute("name"), latlng,markers[i].getAttribute("population"), markers[i].getAttribute("countrycode"), markers[i].getAttribute("region")));
var onekmcircle = new google.maps.Circle(circleOptions);
}
google.maps.event.addListener(map, 'zoom_changed', function() {
var url ='http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var icon = google.maps.MarkerImage(url);
var currentZoom = map.getZoom();
if (currentZoom >9){
for(var i=0; i< gMarkers.length; i++ ) {
gMarkers[i].setIcon(icon);
}
}else{
for(var i=0; i< gMarkers.length; i++ ) {
gMarkers[i].setIcon({path: google.maps.SymbolPath.CIRCLE,scale: 2});
}
}
});
}
function createMarker(name, latlng, popl, cntry, rgon) {
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 2
},
title: name
});
var contentstring = '<b>'+name+'</b>'+'<br>Population: '+popl+'<br>Country: '+cntry+'<br>Region: '+rgon;
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: contentstring});
infowindow.open(map, marker);
var zoomLevel = map.getZoom();
map.setCenter(marker.getPosition());
if (zoomLevel<6){
map.setZoom(6);
}
});
return marker;
}
google.maps.event.addListener(marker,''mouseover'', function() {
marker.setIcon("fileadmin/new_templates/images/home_map_notification_hover.png");
$.ajax({
type: "POST",
async : false,
data: ''address=''+add ,
success: function(html){
infowindow.setContent(html);
infowindow.open(map,marker);
},
});
});
// On Mouse out
google.maps.event.addListener(infowindow, ''mouseout'', function () {
marker.setIcon("fileadmin/new_templates/images/home_page_map_notification.png");
});
// On Infowindow close
google.maps.event.addListener(infowindow, ''closeclick'', function () {
marker.setIcon("fileadmin/new_templates/images/home_page_map_notification.png");
});
相关文章:
- 单击标记时更改标记图标(在单击事件上),并在单击另一个标记时将其恢复为普通图标
- 完整日历 - 在事件上拖放图标
- IE 输入清除图标有时不会触发更改事件
- jQuery显示带有切换事件的图标
- 无法在更改事件中获得不同的图标
- 在 jquery 移动版中分别分隔可折叠文本和图标的事件
- 引导日期时间选择器 - 覆盖单击日历图标事件
- Javascript - 在加载页面内容时将图标/图像放在页面上,并在某些JS事件中使用它
- 字体真棒图标,带有点击事件集
- 流星事件的目标是在带有内部图标的链接上表现奇怪
- 手风琴图标正在更改,当手风琴内部有一些点击事件:引导 2.3 版本
- 谷歌日历-事件旁边的小图标
- 单击按钮上的图标字体图标(有时是文本)时,Backbone.js事件未触发
- Fullcalendar将图标添加到事件而不触发事件单击
- JS:带有图标的按钮的事件目标
- 单击按钮后,在单击事件进行时,在按钮上显示微调器图标
- 使用keyup事件使jquery图标可见
- 链接上的浮动图标不接收鼠标单击事件
- Chrome扩展触发点击事件上的图标按下
- 在单选按钮更改事件上动态更改字体Awesome图标