如何将Numbers放在Google Map API标记上?

时间:2011-07-23 13:28:37

标签: php javascript mysql google-maps google-maps-markers

我在我的项目中使用GoogleMap API,其中通过使用数据库中的数据呈现特定车辆的位置,我已经实现了这个,我的问题是它是否可以获得标记上的数字,来自车辆A已经在1到2个Decembre的100个地方,我希望从1到100的数字显示其路径,这是我的Google API的创建标记功能:

    function createMarker(point, IMEI, Velocity, Ora, Data) {   
      var marker = new GMarker(point, 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;
     }

这是googmapsapi.html使用其输出的代码,输出是一个简单的xml文件,其中包含许多“标记”标记包含的信息,例如long,lat,date和time,这个列表是否可以以某种方式用来获取数字?

         // 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>';

          }

我想添加关于Icon的代码,在我的例子中是一个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);

谢谢你的时间!

4 个答案:

答案 0 :(得分:1)

答案 1 :(得分:1)

好的,按照@ChristopheCVB的链接,我完成了它! Lemme将来分享有人需要的代码

此代码基本上创建了1000个图标,上面写着1到1000的数字,需要一个javascript文件mapiconmaker.js,所以要么下载它并将其与其他网站文件放在一起,

                 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);
      }

之后我在googlemap api javascript函数渲染地图时以及将代码分配给代码所在的每个位置时使用这些标记:

            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;
             }

我是这个网站的新手,但是真的很喜欢从专家那里获得免费和快速帮助的精神,我肯定会有所贡献,至少可以回馈我得到的东西。谢谢大家!

答案 2 :(得分:0)

我很确定API不支持对标记进行编号。我可以想到两个令人不满意的选择。

  1. 设置zIndex,然后将zIndex显示为标记的标题。
  2. 使用setIcon将MarkerImage更改为编号图形。
  3. 我通常有比这更好的答案。我想我有一个“休息日”。

答案 3 :(得分:0)

无需制作自定义标记,因为Goolge具有Google Chart Api:http://code.google.com/intl/de/apis/chart。我用它在我的应用程序中创建编号图标。它给我带来了很多麻烦。