在Google地图标记上按类别添加自定义图标 [英] Add custom icon by category on google map marker
本文介绍了在Google地图标记上按类别添加自定义图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的代码中，有两个类别，我想显示自定义图标，而不是按类别显示标记.对于这两个类别，我想为每个类别显示两个自定义图标.但是，要我弄清楚它变得越来越困难.
In the following code there are two categories and I want to show custom icon instead of marker by category. Mean for the two categories I want to show two custom icon for each category. But Its getting hard for me to figured it out.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Categories</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<input type="checkbox" value="Show Group 1" onclick="displayMarkers(this,1);">
<input type="checkbox" value="Show Group 2" onclick="displayMarkers(this, 2);">
<script type="text/javascript">
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 1,], //category 1
['Coogee Beach', -33.923036, 151.259052, 1], //category 1
['Cronulla Beach', -34.028249, 151.157507, 2], //category 2
['Manly Beach', -33.800101, 151.287478, 2], //category 2
['Maroubra Beach', -33.950198, 151.259302, 2] //category 2
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var i, newMarker;
for (i = 0; i < beaches.length; i++) {
newMarker = new google.maps.Marker({
position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
map: map,
title: beaches[i][0]
});
newMarker.category = beaches[i][3];
newMarker.setVisible(false);
markers.push(newMarker);
}
function displayMarkers(obj,category) {
var i;
for (i = 0; i < markers.length; i++)
{
if (markers[i].category === category) {
if ($(obj).is(":checked")) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
}
}
</script>
</body>
</html>
推荐答案
为您的类别创建图标数组:
Create an array of icons for your categories:
var icons = ["",
"http://maps.google.com/mapfiles/ms/micons/blue.png",
"http://maps.google.com/mapfiles/ms/micons/green.png"];
使用它来填充标记的icon属性:
use that to populate the icon property of the marker:
for (i = 0; i < beaches.length; i++) {
newMarker = new google.maps.Marker({
position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
map: map,
icon: icons[beaches[i][3]],
title: beaches[i][0]
});
代码段:
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 1], //category 1
['Coogee Beach', -33.923036, 151.259052, 1], //category 1
['Cronulla Beach', -34.028249, 151.157507, 2], //category 2
['Manly Beach', -33.800101, 151.287478, 2], //category 2
['Maroubra Beach', -33.950198, 151.259302, 2] //category 2
];
var icons = ["",
"http://maps.google.com/mapfiles/ms/micons/blue.png",
"http://maps.google.com/mapfiles/ms/micons/green.png"
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var i, newMarker;
for (i = 0; i < beaches.length; i++) {
newMarker = new google.maps.Marker({
position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
map: map,
icon: icons[beaches[i][3]],
title: beaches[i][0]
});
newMarker.category = beaches[i][3];
newMarker.setVisible(false);
markers.push(newMarker);
}
function displayMarkers(obj, category) {
var i;
for (i = 0; i < markers.length; i++) {
if (markers[i].category === category) {
if ($(obj).is(":checked")) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
}
}
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
#map {
height: 90%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
<label>blue</label>
<input type="checkbox" value="Show Group 1" onclick="displayMarkers(this,1);">
<label>green</label>
<input type="checkbox" value="Show Group 2" onclick="displayMarkers(this, 2);">
这篇关于在Google地图标记上按类别添加自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
