gpt4 book ai didi

javascript - 当用户单击外部图像时尝试更改标记的图标

转载 作者:行者123 更新时间:2023-12-02 19:12:05 25 4
gpt4 key购买 nike

所以我们的想法是改变标记的“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>

enter image description here enter image description here

关于javascript - 当用户单击外部图像时尝试更改标记的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13592144/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com