我正在将google map用于我的网站。单击地图的右侧菜单时,我想显示不同的颜色。每个链接都有其自己的标记颜色。如果单击第一个链接,则标记必须为绿色,如果单击第二种颜色,则标记必须为红色,然后继续。但是在代码中,当我单击这些链接中的每一个之后,我写的是标记获得红色,这是我分配的最后一种颜色。我认为每个链接的标记“点击”功能应该是不同的功能。我已经尝试了很多示例,但无法使其正常工作。
以下是HTML代码:
<div class="col-sm-12 col-xs-12 map-site">
<span>نقشه لامپ های پارک ملت</span>
<div class="sidemap col-sm-3 col-xs-3">
<button type="button" class="navbar-toggle1 try-op" >
<span class="icon-bar top-m"></span>
<span class="icon-bar mid-m"></span>
<span class="icon-bar bottom-m"></span>
</button>
<div class="menumap"> <!-- <span class="btnClose">×</span> -->
<ul>
<li><a class="healthmap" id="healthmap">سلامت بارتی</a></li>
<li><a class="chargemap" id="chargemap">شارژ باتری</a></li>
<li><a class="saturationmap" id="saturationmap">شدت روشنایی</a></li>
</ul>
</div>
</div>
<div id="map-canvas"></div>
</div>
JS代码:
var gmarkers = [];
var pmarkers = [];
var rmarkers = [];
function initialize() {
var locations = [
['چراغ یک', 36.320153, 59.536075, 4],
['چراغ دو', 36.320014, 59.536612, 5],
['چراغ سه', 36.319859, 59.537212, 3],
['چراغ چهار', 36.320066, 59.538091, 2],
['چراغ پنج', 36.319513, 59.536440, 1]
];
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(36.320020, 59.537801),
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
for (i = 0; i < locations.length; i++) {
//var image = 'image/marker.png';
var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
}
});
marker.addListener('click', function(e) {
this.setIcon({
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
})
})
gmarkers.push(marker);
marker.addListener('click', function(p) {
this.setIcon({
url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
})
})
pmarkers.push(marker);
marker.addListener('click', function(r) {
this.setIcon({
url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
})
})
rmarkers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
$('.healthmap').click(function() {
for (var i = 0; i < gmarkers.length; i++) {
google.maps.event.trigger(gmarkers[i], "click");
}
});
$('.chargemap').click(function() {
for (var i = 0; i < pmarkers.length; i++) {
google.maps.event.trigger(pmarkers[i], "click");
}
});
$('.saturationmap').click(function() {
for (var i = 0; i < rmarkers.length; i++) {
google.maps.event.trigger(rmarkers[i], "click");
}
});
有人可以帮我解决这个问题吗?我认为它是由于click
函数和marker.addListener('click')
不同而出现的,但我无法解决此问题。
here是js小提琴链接。
要更改所有标记并使用不同的颜色,请更改外部onclick
功能中的图标。
$('.healthmap').click(function() {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon({
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
});
}
});
$('.chargemap').click(function() {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon({
url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
});
}
});
$('.saturationmap').click(function() {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon({
url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
})
}
});
代码段:
var gmarkers = [];
function initialize() {
var locations = [
['چراغ یک', 36.320153, 59.536075, 4],
['چراغ دو', 36.320014, 59.536612, 5],
['چراغ سه', 36.319859, 59.537212, 3],
['چراغ چهار', 36.320066, 59.538091, 2],
['چراغ پنج', 36.319513, 59.536440, 1]
];
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(36.320020, 59.537801),
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
for (i = 0; i < locations.length; i++) {
var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
}
});
gmarkers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
$('.healthmap').click(function() {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon({
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
});
}
});
$('.chargemap').click(function() {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon({
url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
});
}
});
$('.saturationmap').click(function() {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon({
url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
})
}
});
#map-canvas {
height: 60%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-12 col-xs-12 map-site" style="height:100%; width: 100%;">
<span>نقشه لامپ های پارک ملت</span>
<div class="sidemap col-sm-3 col-xs-3">
<button type="button" class="navbar-toggle1 try-op">
<span class="icon-bar top-m"></span>
<span class="icon-bar mid-m"></span>
<span class="icon-bar bottom-m"></span>
</button>
<div class="menumap">
<!-- <span class="btnClose">×</span> -->
<ul>
<li><a class="healthmap" id="healthmap">سلامت بارتی(make green)</a></li>
<li><a class="chargemap" id="chargemap">شارژ باتری(make blue)</a></li>
<li><a class="saturationmap" id="saturationmap">شدت روشنایی(make red)</a></li>
</ul>
</div>
</div>
<div id="map-canvas"></div>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>