自定义Google地图图标如果值> = 1 [英] Custom Google Map Icon If Value >=1
问题描述
我使用下面的代码，使用来自MySQL数据库的位置数据在Google地图上正确显示标记。
< ！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmllang =en>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>所有地点< /标题>
< link rel =stylesheethref =css / alllocationsstyle.csstype =text / cssmedia =all/>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false&language=en>< / script>
< script type =text / javascript>
var customIcons = {
0：{
图标：'http://labs.google.com/ridefinder/images/mm_20_red.png'，
shadow：'http： //labs.google.com/ridefinder/images/mm_20_shadow.png'
}，
1：{
图标：'http://labs.google.com/ridefinder/images/ mm_20_green.png'，
shadow：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load（）{
var map = new google.maps.Map（document.getElementById（map），{
center：new google.maps.LatLng（ 54.312195845815246，-4.45948481875007），
zoom：6，
mapTypeId：'roadmap'
}）;
var infoWindow = new google.maps.InfoWindow;
//根据您的PHP文件的名称更改此值
downloadUrl（phpfile.php，函数（data）{
var xml = data.responseXML;
var marker = xml.documentElement.getElementsByTagName（marker）;
for（var i = 0; i< markers.length; i ++）{
var locationname = markers [i] .getAttribute （locationname）;
var address = markers [i] .getAttribute（address）;
var finds = markers [i] .getAttribute（finds）;
var totalfinds = markers [i] .getAttribute（totalfinds）;
var point = new google.maps.LatLng（
parseFloat（markers [i] .getAttribute（osgb36lat）），
parseFloat（markers [i] .getAttribute（osgb36lon）））;
var html = locationname +'，No.of found：'+< b>+ totalfinds +< / b> ;
var icon = customIcons [totalfinds] || {};
var marker = n ew google.maps.Marker（{
map：地图，
位置：点，
标题：地址，
图标：icon.icon，
shadow：图标。影子
}）;
bindInfoWindow（marker，map，infoWindow，html）;
}
}）;
函数bindInfoWindow（marker，map，infoWindow，html）{
google.maps.event.addListener（marker，'click'，function（）{
infoWindow.setContent（html）;
infoWindow.open（map，marker）;
}）;
}
函数downloadUrl（url，callback）{
var request = window.ActiveXObject？
new ActiveXObject（'Microsoft.XMLHTTP'）：
new XMLHttpRequest;
request.onreadystatechange = function（）{
if（request.readyState == 4）{
request.onreadystatechange = doNothing;
回调（request，request.status）;
}
};
request.open（'GET'，url，true）;
request.send（null）;
}
函数doNothing（）{}
< / script>
< / head>
< body onLoad =load（）>
< div id =map>< / div>
< / body>
< / html>
就目前而言，确定显示的标记是红色还是绿色的代码，纯粹是纯粹的，其中一个字段的值是'0'还是'1'。
我想要做的是改变这个以反映是否值为'0'或者是'1'还是'大于1'来确定标记的颜色。
凭借我有限的知识，我尝试使用'> 1'，'> = 1'，这些都没有奏效。
我只是想知道是否有人可以请我指出正确的方向，这样我就可以实现这个目标。
@IRHM - 感谢您的回复，现在很清楚。
您示例中的'0'和'1'只是方法命名这两个图标。 '猫'和'狗'是同样有效的名字，例如
var customIcons = {
cat：{
图标：'http://labs.google.com/ridefinder/images/mm_20_red.png'，
阴影：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}，
狗：{
图标：'http://labs.google.com/ridefinder/images/mm_20_green.png'，
shadow：'http：// labs .google.com / ridefinder / images / mm_20_shadow.png'
}
};
您的代码今天正常工作，因为当您计算图标时，最终会得到0或1是你选择的名字。要改变它，以便您可以选择'0'或'> 1'，您需要添加一些额外的逻辑。替换：
var icon = customIcons [totalfinds] || {};
附带：
var icon = {};
if（totalFinds == 0）{
icon = customIcons [0];
} else if（totalFinds> = 1）{
icon = customIcons [1];
$ b 这个逻辑检查totalFinds的值，然后用它来查找一个customIcons中的图标使用您提供的名称（在本例中为'0'或'1'）。
I am using the code below to correctly show markers on a Google map using location data from MySQL database.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All Locations</title>
<link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
var customIcons = {
0: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var finds = markers[i].getAttribute("finds");
var totalfinds = markers[i].getAttribute("totalfinds");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var html = locationname + ', No.of finds: ' + "<b>" + totalfinds + "</b>";
var icon = customIcons[totalfinds] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
title: address,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body onLoad="load()">
<div id="map"></div>
</body>
</html>
As it stands at the moment, the code to determine whether the marker shown, is red, or green, is pure and simply whether the value of one of the fields is '0' or '1'.
What I would like to do is to change this to reflect whether the value is '0' or whether it's '1' or 'greater than 1' to determine the color of the marker.
With my limited knowledge I've tried using '>1', '>=1' which haven't worked.
I just wondered whether it would be at all possible whether someone could please point me in the right direction so I can get this to work.
解决方案 @IRHM - Thanks for the reply, it's clear now.
The '0' and '1' in your example are just ways of "naming" those two icons. 'cat' and 'dog' would be equally valid names e.g.
var customIcons = {
cat: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
dog: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
Your code happens to work today because when you count the icons, you end up with 0 or 1 which are the names you chose. To change it so that you can select '0' or '> 1' you need to add some extra logic. Replace:
var icon = customIcons[totalfinds] || {};
with:
var icon = {};
if (totalFinds == 0) {
icon = customIcons[0];
} else if (totalFinds >= 1) {
icon = customIcons[1];
}
This logic checks the value of totalFinds, and then uses that to look up one of the icons in customIcons using the names you provided (in this case '0' or '1').
这篇关于自定义Google地图图标如果值> = 1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
