google maps api v3显示不同的标记 [英] google maps api v3 display different markers

问题描述

我每次都要根据病情显示不同的标记。

例如：

• 如果temp> 1显示ilios li>
  
• 如果湿度> 97％显示omixli

我正在尝试在 createmarker（）功能 var marker1（注释中的代码）但我找不到方法。有没有人知道我会用这个方式做什么呢？

任何建议，例子，意见都是赞赏！

  var infowindow; 
 var map; 
 
函数initialize（）{
 var myLatlng = new google.maps.LatLng（38.822590,24.653320）; 
 var myOptions = {
 zoom：5，
 center：myLatlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 map = new google .maps.Map（document.getElementById（map_canvas），myOptions）; 
 downloadUrl（moredata.xml，function（data）{
 var items = data.documentElement.getElementsByTagName（item）; 
 for（var i = 0; i& .length; i ++）{
 var description = items [i] .getElementsByTagName（description）[0] .childNodes [0] .nodeValue; 
 var humidity = items [i] .getElementsByTagName（ （temp）[0] .childNodes [0] .nodeValue; 
 var latlng =新的google.maps.LatLng（parseFloat（items [i] .getElementsByTagName（lat）[0] .childNodes [0] .nodeValue），
 parseFloat（items [i] .getElementsByTagName（lng）[ 0] .childNodes [0] .nodeValue））; 
 
 if（temp>1°C）{
 alert（temp）; 
 var marker = createMarker描述，latlng）; 
} 
 
如果（湿度>97％）{
警报（湿度）; 
 var marker = createMarker（description，latlng）; 
} 
 
} 
}）; 
} 
 
 var iconBase ='weather_icons /'; 
 var icons = {
 ilios：{
图标：iconBase +'ilios.png'
}，
 pagetos：{
图标：iconBase + page322.png'
}，
 omixli：{
图标：iconBase +'omixli.png'
} 
}; 
 
函数createMarker（description，latlng）{
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
图标：图标['pagetos']。图标
}）; 
 
 // var marker1 = new google.maps.Marker（{
 // position：latlng，
 // map：map，
 // icon：icons ['omixli']。icon 
 //}）; 
 
 google.maps.event.addListener（marker，click，function（）{
 if（infowindow）infowindow.close（）; 
 infowindow = new google.maps .InfoWindow（{content：description}）; 
 infowindow.open（map，marker）; 
}）; 
返回标记; 
} 
  

这里是 moredata.xml

 < item> 
< description&Thesaloniki< / description> 
< temp> 10°C< / temp> 
< outsideHumidity> 98％< / externalHumidity> 
< lat> 40.422726139672626< / lat> 
< lng> 22.93392777442932< / lng> 
< / item> 
< item> 
< description> Giannena< / description> 
< temp> 14°C< / temp> 
< outsideHumidity> 90％< / externalHumidity> 
< lat> 39.62209843837158< / lat> 
< lng> 20.89027225971222< / lng> 
< / item> 
< item> 
< description> Atiki< / description> 
< temp> 15°C< / temp> 
< outsideHumidity> 65％< / outsideHumidity> 
< lat> 38.08469095792561< / lat> 
< lng> 23.680233657360077< / lng> 
< / item> 
  

解决方案

经过大量的搜索，终于找到了解决方案！

我必须创建尽可能多的 createMarker 函数作为图像！我要插入正确的代码，我希望将来会有所帮助您！
这里你是..

  var infowindow; 
 var map; 
 
函数initialize（）{
 var myLatlng = new google.maps.LatLng（38.822590,24.653320）; 
 var myOptions = {
 zoom：5，
 center：myLatlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 map = new google .maps.Map（document.getElementById（map_canvas），myOptions）; 
 downloadUrl（moredata.xml，function（data）{
 var items = data.documentElement.getElementsByTagName（item）; 
 for（var i = 0; i& .length; i ++）{
 var description = items [i] .getElementsByTagName（description）[0] .childNodes [0] .nodeValue; 
 var humidity = items [i] .getElementsByTagName（外部Humidity）[0] .childNodes [0] .nodeValue; 
 var temp = items [i] .getElementsByTagName（temp）[0] .childNodes [0] .nodeValue; 
 var title = item [i] .getElementsByTagName（title）[0] .childNodes [0] .nodeValue; 
 var latlng = new google.maps.LatLng（parseFloat（items [i] .getElementsByTagName（lat）[ 0] .childNodes [0] .nodeValue），
 parseFloat（items [i] .getElementsByTagName（lng）[0] .childNodes [0] .nodeValue））; 
 
 if （temp> 38°C）{
 alert（temp）; 
 var marker = createMarker2（description，latlng，ilios）; 
} 
 
 if（temp < 1°C）{
 alert（temp）; 
 var marker = createMarker（description，latlng，cold）; 
} 
 
 if（humidity>97％）{
 alert（windSpeed）; 
 var marker = createMarker1（description，latlng，omixli）; 
} 
 
} 
}）; 
} 
 
 var cold ='weather_icons / pagetos2.png'; 
 var omixli ='weather_icons / omixli.gif'; 
 var ilios ='weather_icons / ilios.png'; 
 
函数createMarker（description，latlng，cold）{
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
图标：cold 
}）; 
 
 google.maps.event.addListener（marker，click，function（）{
 if（infowindow）infowindow.close（）; 
 infowindow = new google.maps .InfoWindow（{
 content：description 
}）; 
 infowindow.open（map，marker）; 
}）; 
返回标记; 
} 
 
函数createMarker1（description，latlng，omixli）{
 var marker1 = new google.maps.Marker（{
 position：latlng，
地图：地图，
图标：omixli 
}）; 
 
 google.maps.event.addListener（marker1，click，function（）{
 if（infowindow）infowindow.close（）; 
 infowindow = new google.maps .InfoWindow（{
 content：description 
}）; 
 infowindow.open（map，marker1）; 
}）; 
 return marker1; 
} 
函数createMarker2（description，latlng，ilios）{
 var marker2 = new google.maps.Marker（{
 position：latlng，
 map：map， 
图标：ilios 
}）; 
 
 google.maps.event.addListener（marker2，click，function（）{
 if（infowindow）infowindow.close（）; 
 infowindow = new google.maps .InfoWindow（{
 content：description 
}）; 
 infowindow.open（map，marker2）; 
}）; 
 return marker2; 
} 
  

最后，我想对所有评论者给予建议！

I'm trying to display different markers depending the condition every time.

For example :

• If temp > 1 display "ilios"
• If humidity > 97% display "omixli"

I am trying to create inside the createmarker() function the var marker1( the code in comments ) but i cannot find the way.

Does anybody have an idea how i'm gonna do it in this or in a different way?
Any suggestion , examples , comments would be appreciated!

var infowindow;
  var map;

  function initialize() {
    var myLatlng = new google.maps.LatLng(38.822590,24.653320);
    var myOptions = {
      zoom: 5,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("moredata.xml", function(data) {
      var items = data.documentElement.getElementsByTagName("item");
      for (var i = 0; i < items.length; i++) {
        var description = items[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
        var humidity    = items[i].getElementsByTagName("outsideHumidity")[0].childNodes[0].nodeValue;
        var temp        = items[i].getElementsByTagName("temp")[0].childNodes[0].nodeValue;
        var latlng = new google.maps.LatLng(parseFloat(items[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue),
                                    parseFloat(items[i].getElementsByTagName("lng")[0].childNodes[0].nodeValue));

        if ( temp > "1 °C" ) {
          alert(temp);
          var marker = createMarker( description,latlng );
          }

          if (humidity > "97 %") {
          alert(humidity);
          var marker = createMarker( description,latlng );
          }

       }
     });
  }

  var iconBase = 'weather_icons/';
        var icons = {
          ilios: {
            icon: iconBase + 'ilios.png'
          },
          pagetos: {
            icon: iconBase + 'pagetos2.png'
          },
          omixli: {
          icon: iconBase + 'omixli.png'
          }
        };

  function createMarker(description, latlng) {
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: icons['pagetos'].icon
    });

    //var marker1 = new google.maps.Marker({
    //position: latlng,
    //map: map,
    //icon: icons['omixli'].icon
    //});

    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: description});
      infowindow.open(map, marker);
    });
    return marker;
  }

Here's the moredata.xml

<item>
<description>Thesaloniki</description>
<temp>10 °C</temp>
<outsideHumidity>98 %</outsideHumidity>
<lat>40.422726139672626</lat>
<lng>22.93392777442932</lng>
</item>
<item>
<description>Giannena</description>
<temp>14 °C</temp>
<outsideHumidity>90 %</outsideHumidity>
<lat>39.62209843837158</lat>
<lng>20.89027225971222</lng>
</item>
<item>
<description>Atiki</description>
<temp>15 °C</temp>
<outsideHumidity>65 %</outsideHumidity>
<lat>38.08469095792561</lat>
<lng>23.680233657360077</lng>
</item>

解决方案

After a lot of searching , finally i found the solution!
I have to create as many createMarker functions as the images are!I'm gonna insert the correct code and i hope in the future will help you! Here you are..

var infowindow;
  var map;

  function initialize() {
    var myLatlng = new google.maps.LatLng(38.822590,24.653320);
    var myOptions = {
      zoom: 5,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("moredata.xml", function(data) {
      var items = data.documentElement.getElementsByTagName("item");
      for (var i = 0; i < items.length; i++) {
        var description = items[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
        var humidity    = items[i].getElementsByTagName("outsideHumidity")[0].childNodes[0].nodeValue;
        var temp        = items[i].getElementsByTagName("temp")[0].childNodes[0].nodeValue;
        var title       = items[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
        var latlng = new google.maps.LatLng(parseFloat(items[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue),
                                    parseFloat(items[i].getElementsByTagName("lng")[0].childNodes[0].nodeValue));

        if ( temp > "38 °C" ) {
          alert(temp);
          var marker = createMarker2( description,latlng,ilios );
          }

          if ( temp < "1 °C" ) {
          alert(temp);
          var marker = createMarker( description,latlng,cold );
          }

          if ( humidity > "97%" ) {
          alert(windSpeed);
          var marker = createMarker1( description,latlng,omixli );
          }

       }
     });
  }

  var cold  = 'weather_icons/pagetos2.png';
  var omixli = 'weather_icons/omixli.gif';
  var ilios = 'weather_icons/ilios.png';

  function createMarker( description,latlng,cold ) {
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: cold
    });

    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({
      content: description
      });
      infowindow.open(map, marker);
    });
    return marker;
  }

  function createMarker1( description,latlng,omixli ) {
    var marker1 = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: omixli
    });

    google.maps.event.addListener(marker1, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({
      content: description
      });
      infowindow.open(map, marker1);
    });
    return marker1;
  }
function createMarker2( description,latlng,ilios) {
    var marker2 = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: ilios
    });

    google.maps.event.addListener(marker2, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({
      content: description
      });
      infowindow.open(map, marker2);
    });
    return marker2;
  }

Endly , I wanna say thanks a lot for everyone that commented and gave me suggestions!

这篇关于google maps api v3显示不同的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！