从数据库更改googlemap标记图像

时间:2015-06-03 05:40:19

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

有没有办法做到这一点?

就像,我的数据库中有一些数据,我在googlemap api中将此数据显示为标记。

但我想从我的数据库中的相同ID更改标记图像。

名称和描述,按标记正确显示,但我想更改标记图像

我的代码:

  <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title></title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
 <script type="text/javascript">


 var icon = new google.maps.MarkerImage('http://localhost/partytime/uploadedimages/davi.png',
 new google.maps.Size(50,50), 
 new google.maps.Point(0,0),
 new google.maps.Point(0,0),
 new google.maps.Size(50,50));
 var center = null;
 var map = null;
 var currentPopup;
 var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng, info) {
 var pt = new google.maps.LatLng(lat, lng);
 bounds.extend(pt);
 var marker = new google.maps.Marker({
 position: pt,
 icon: icon,
 map: map
 });
 var popup = new google.maps.InfoWindow({
 content: info
 //maxWidth: 300

 });
 google.maps.event.addListener(marker, "click", function() {
 if (currentPopup != null) {
 currentPopup.close();
 currentPopup = null;
 }
 popup.open(map, marker);
 currentPopup = popup;
 });
 google.maps.event.addListener(popup, "closeclick", function() {
 map.panTo(center);
 currentPopup = null;
 });
 }
 function initMap() {
 map = new google.maps.Map(document.getElementById("map"), {
 center: new google.maps.LatLng(0, 0),
 zoom: 3,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: false,
 mapTypeControlOptions: {
 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
 },
 navigationControl: true,
 navigationControlOptions: {
 style: google.maps.NavigationControlStyle.SMALL
 }
 });
 <?php
 }
 $query = mysql_query("SELECT * FROM localizacoes");
 while ($row = mysql_fetch_array($query)){
 $r =  explode( ',', $row['posicao'] );
 $name=$row['nome'];
 $lat = $r[0];
 $lon = $r[1];

 $dataevento = explode( '-', $row['dataevento'] );
 $ano = $dataevento[0];
 $mes = $dataevento[1];
 $dia = $dataevento[2];

 echo ("addMarker($lat, $lon,'<h1><b>$name</b></h1>$dia-$mes-$ano');\n");
 }
 ?>    

 }
 </script>
 </head>
 <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
 <div id="centro">
 <div id="map">

 </div>
 </div>
 </html>

注意:在这段代码中,我从localhost中输入了一个imagem ...这个imagem引用了一个ID,我希望将每个id中的每个图像显示为googlemap marker icon

1 个答案:

答案 0 :(得分:0)

有关如何将标记图标与数据库中的类型字段相关联的信息,请参阅此文章:Using PHP/MySQL with Google Maps: Custom Icons

从那篇文章:

自定义图标

  

您可以为标记指定自定义图标。

     

首先创建一个关联数组,将您的图标与您的类型字符串相关联:&#39; restaurant&#39;或者&#39; bar。&#39;这使得稍后在从XML创建标记时可以轻松引用图标。

var customIcons = {
  restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
  },
  bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  }
};