开发者

How to put Numbers on Google Map API markers?

i'm using GoogleMap API in my project where the position of a particular vehicle is rendered by using data in the DB, i have already implemented this, MY question is if its possible to get numbers on the Markers,e.x Vehicle A has been in 100 places from 1 to 2 of Decembre, i would like having numbers starting from 1 to 100 kinda showing its path,This is the create marker function of my Google API:

    function createMarker(point, IMEI, Velocity, Ora, Data) {   
      var marker = new GMarker(p开发者_如何学Coint, iconBlue); 
      var html = "<b>" + "Ora: " + "</b>" + Ora + "<br/>" + "<b>" + "Data: " + "</b>"+ Data + "<br/>" + "<b>" + "Velocità: " + "</b>" + Velocity + " km/h" ; 
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html); });
      return marker;
     }

This is the code used whose output is used by the googmapsapi.html, the output is a simple xml file with a number of number of "markers" tags containig info such as long,lat,date and time, could this list be used somehow to get the numbers out?

         // Opens a connection to a MySQL server
$connection=mysql_connect ("localhost","root","alphabravo");
if (!$connection) {
    die('Not connected : ' . mysql_error());
                    }

// Set the active MySQL database
$db_selected = mysql_select_db("tracciasat", $connection);
if (!$db_selected) {
    die ('Can\'t use db : ' . mysql_error());
            }

// Select all the rows in the markers table
//$query = "SELECT * FROM sessione WHERE 1";
$query = "SELECT * FROM sessione WHERE Dat BETWEEN '$_GET[strt]' AND '$_GET[end]' AND IMEI = '$_GET[id]'";
$result = mysql_query($query);
if (!$result) {
    die('Invalid query: ' . mysql_error());
                }

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

    // Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
     echo '<marker ';
     echo 'IMEI="' . parseToXML($row['IMEI']) . '" ';
    echo 'Velocity="' . parseToXML($row['Velocity']) . '" ';
    echo 'Ora="' . parseToXML($row['Ora']) . '" ';
       echo 'Data="' . parseToXML($row['Dat']) . '" ';
    echo 'lat="' . $row['Latitudine'] . '" ';
         echo 'lng="' . $row['Longitudine'] . '" ';
               //echo 'type="' . $row['type'] . '" ';
                 echo '/>';
                                                                }

          // End XML file
                        echo '</markers>';

          }

I would like to add the code regarding the Icon, which in my case is a blueIcon:

       var iconBlue = new GIcon(); 
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);

Thanks for your time!


Check the following url to customize your markers icons :

http://groups.google.com/group/Google-Maps-API/web/examples-tutorials-custom-icons-for-markers?pli=1


Okay guys,following the link by @ChristopheCVB i accomplished it! Lemme share the code incase somebody needs in the future

This code basically creates 1000 icons with numbers ranging from 1 to 1000 written on them, a javascript file mapiconmaker.js is needed so either download it and put it together with other website files,

                 type="text/javascript"></script>
         <script src="mapiconmaker.js" language="text/javascript"></script>
   <script type="text/javascript">

  //<![CDATA[
    var customIcons = [1000];
    for(var j=0;j<1000;j++){
    var iconOptions = {};
  iconOptions.primaryColor = "#0000FF";
  iconOptions.strokeColor = "#000000";
iconOptions.label = j.toString().replace();
 iconOptions.labelColor = "#000000";
 iconOptions.addStar = false;
   iconOptions.starPrimaryColor = "#FFFF00";
 iconOptions.starStrokeColor = "#0000FF";
   customIcons[j]  = MapIconMaker.createLabeledMarkerIcon(iconOptions);
      }

Afterwards i use these markers when the googlemap api javascript function is rendering the map and when it is assigning the markers to each location that code is here:

            GDownloadUrl("second.php?strt="+ysdate+"/"+msdate+"/"+dsdate+"&end="+yedate+"/"+medate+"/"+dedate+"&id="+ide, function(data) {
                var xml = GXml.parse(data);
                var markers = xml.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                var IMEI = markers[i].getAttribute("IMEI");
                var Velocity = markers[i].getAttribute("Velocity");
                var Ora = markers[i].getAttribute("Ora");
                var Data = markers[i].getAttribute("Data");
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
                var marker = createMarker(point, IMEI, Velocity, Ora, Data, i);

                map.addOverlay(marker);

              }
            });
          }
        }

        function createMarker(point, IMEI, Velocity, Ora, Data, i) {    
              var marker = new GMarker(point, customIcons[i]); 
              var html = "<b>" + "Ora: " + "</b>" + Ora + "<br/>" + "<b>" + "Data: " + "</b>"+ Data + "<br/>" + "<b>" + "Velocità: " + "</b>" + Velocity + " km/h" ; 
              GEvent.addListener(marker, 'click', function() {
                marker.openInfoWindowHtml(html); });
              return marker;
             }

I'm new to this site, but really love the spirit of getting free and fast help from experts, i will surely contribute as the time goes to atleast give back abit of what i get.Thanks everybody!


I'm pretty sure the API doesn't support numbering the markers. I can think of two unsatisfying alternatives.

  1. Set the zIndex, and then display the zIndex as the marker's title.
  2. Use setIcon to change MarkerImage to a numbered graphic.

I usually have better answers than this one. I think I'm having an "off" day.


There is no need to make a custom marker because Goolge has the Google Chart Api: http://code.google.com/intl/de/apis/chart. I use it to create numbered icons in my applications. It saves me a lot of headache.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜