所以我们的想法是改变标记的“icon”属性。我不太擅长 javascript，所以它真的让我抓狂。我所拥有的是一张 map ，它初始化了一个空白的标记(没有绘图)，然后我在 div 的左侧有一些选择。
我想要的是更改该特定实例的(标记)图标图形。
这是我到目前为止的代码。我需要以某种方式附加一个监听器，根据我在 map 之外的一些选项来更改此图标图片。
<script type="text/javascript">
var zind = google.maps.Marker.MAX_ZINDEX;
var $map;
var $latlng;
var overlay;
function initialize() {
var $latlng = new google.maps.LatLng(<?php echo $model->lat; ?>, <?php echo $model->lon; ?>);
var myOptions = {
zoom: 16,
center: $latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT },
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
panControl:false
};
$map = new google.maps.Map(document.getElementById("map"),
myOptions);
var Vmarker = new google.maps.Marker({
position: $latlng,
title: 'Point A',
map: $map,
icon: '<?php echo Yii::app()->request->baseUrl; ?>/images/library/td_icons/map/ico_blanco.png',
zIndex: 500,
draggable: true
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap($map);
我添加了类似的内容，我想更改 Vmarker 的图标属性，但我不知道应该如何做？
$(document).ready(function() {
initialize();
$("#ico_beer").click(function() {
var icon = $(this).attr('src');
google.maps.event.addListener(Vmarker, 'click', function() {
Vmarker.icon : icon;
});
});
最佳答案
你想知道当用户点击图标div时如何改变图标属性的代码吗？ 如果您是这样，请尝试此代码。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var zind = google.maps.Marker.MAX_ZINDEX;
var map;
var latlng;
var overlay;
var Vmarker;
function initialize() {
var latlng = new google.maps.LatLng(35, 138);
var myOptions = {
zoom : 16,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position : google.maps.ControlPosition.TOP_LEFT
},
zoomControl : true,
zoomControlOptions : {
style : google.maps.ZoomControlStyle.LARGE,
position : google.maps.ControlPosition.LEFT_TOP
},
scaleControl : true,
scaleControlOptions : {
position : google.maps.ControlPosition.TOP_LEFT
},
streetViewControl : false,
panControl : false
};
map = new google.maps.Map($("#map")[0], myOptions);
Vmarker = new google.maps.Marker({
position : latlng,
title : 'Point A',
map : map,
icon : '',
zIndex : 500,
draggable : true
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {
};
overlay.setMap(map);
}
$(document).ready(function() {
initialize();
$(".icons").click(function() {
var icon = $(this).find("img").attr('src');
Vmarker.setIcon(icon);
});
});
</script>
<style type="text/css">
#map {
width: 75%;
height: 100%;
position : absolute;
left : 0;
top : 0;
}
.icons {
border : 1px solid #ccc;
width : 100%;
height : 40px;
line-height : 40px;
overflow : hidden;
cursor : pointer;
}
#bar {
position : absolute;
right : 0;
top : 0;
width : 25%;
height : 100%;
}
#frame {
position : relative;
width : 500px;
height : 300px;
}
</style>
</head>
<body>
<div id="frame">
<div id="map"></div>
<div id="bar">
<div class='icons'><img src="beergarden.png">Beer Garden!</div>
<div class='icons'><img src="fastfood.png">FastFood</div>
</div>
</div>
</body>
</html>
关于javascript - 当用户单击外部图像时尝试更改标记的图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13592144/