不同外部链接的谷歌地图标记点击功能问题
Posted
技术标签:
【中文标题】不同外部链接的谷歌地图标记点击功能问题【英文标题】：google map marker click function problem for different external links 【发布时间】：2020-02-04 03:33:30 【问题描述】：我正在为我的网站使用谷歌地图。单击地图的右侧菜单时，我想显示不同的颜色。每个链接都有自己的标记颜色。如果单击第一个链接，标记必须为绿色，如果单击第二个颜色，则标记必须为红色并继续。但是在代码中，我在单击每个链接后编写，标记会变成红色，这是我分配的最后一种颜色。我认为标记“点击”功能应该是每个链接的不同功能。我已经尝试了很多示例，但我无法使其工作。
这是照片：
这里是 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小提琴链接。
【问题讨论】：
【参考方案1】：要更改所有标记并具有不同的颜色，请更改外部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"
)
);
proof of concept fiddle
代码 sn-p：
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>【讨论】：
以上是关于不同外部链接的谷歌地图标记点击功能问题的主要内容，如果未能解决你的问题，请参考以下文章