javascript - 当用户单击某些链接时更改谷歌地图标记图标
问题描述
我正在使用谷歌地图,我需要根据某些条件更改标记图标。我在地图的右侧添加了一个侧边栏,它解释了可以累积的差异条件。我对谷歌地图 API 和 js 完全陌生,所以我有点混淆。
这是我的页面的图像。我想在单击a
地图右侧边栏上突出显示的标签时,标记的颜色变为绿色。
这是我的 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" href="#">سلامت بارتی</a></li>
<li><a href="#">شارژ باتری</a></li>
<li><a href="#">شدت روشنایی</a></li>
</ul>
</div>
</div>
<div id="map-canvas"></div>
</div>
这是js代码:
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" }
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
$('.healthmap').click(function() {
google.maps.event.trigger(gmarkers[i], "click");
});
我已经尝试过这个答案,但它对我不起作用!有什么办法可以解决这个问题。
解决方案
- 创建一个数组来存储
google.maps.Marker
对象:
var gmarkers = [];
- 使用您创建的标记填充该数组:
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);
- 向标记添加单击事件侦听器以更改其图标:
marker.addListener('click', function(e) {
this.setIcon({
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
})
});
- 添加代码以通过在 jQuery 单击侦听器函数中单击它们的标记数组进行处理:
$('.healthmap').click(function() {
for (var i = 0; i < gmarkers.length; i++) {
google.maps.event.trigger(gmarkers[i], "click");
}
});
代码片段:
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 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);
}
}
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");
}
});
#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" href="#">سلامت بارتی (make green)</a></li>
<li><a href="#">شارژ باتری</a></li>
<li><a href="#">شدت روشنایی</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>
推荐阅读
- javascript - HTML 行内的 Onclick 事件,更改 HTML 行中前一个元素的值
- android - Flutter - 按钮内的文字不会改变
- reactjs - 如何在反应组件的选择元素中使用符号作为选项值
- asp.net - 无需重新加载页面的货币兑换
- javascript - 如何仅隐藏引导侧边栏的一部分?
- memory - 在文件的全局路径上调用 $readmemh()
- azure - MSAL 浏览器登录重定向(回复)URI 不匹配
- javascript - 独特的强大的页面加载来验证未来的请求
- bigcommerce - Stencil 无法处理 500 服务器错误
- javascript - 我正在尝试使用“message.guild.ID”创建一个 if 语句,但它不起作用