-5

abgerufen werden Ich verwende PHP MYSQL auf Wordpress.Wordpress: Wie man Markierungen auf Google Map hinzufügt, wo seine Daten von MYSQL

Ich habe einen Code, der Google Map zur Webseite hinzufügt.

Was ich will, ist in der Lage, Marker zu diesem Google MAP mit PHP und MySQL hinzufügen, wo die Daten, die angezeigt werden, in MYSQL-Datenbank gespeichert werden.

Beispiel, wie muss ich die Karte aussehen:

Wo die Karte eine Losnummern von Markern mit Pop-up-Infofenster

Code enthalten:

<?php 
/* 
Template Name: MAP4 
*/ 
get_header(); 
?> 

<!DOCTYPE html> 
<html> 
    <head> 
     <script src = "https://maps.googleapis.com/maps/api/js"></script> 
     <script> 
      function loadMap() { 
       var mapOptions = { 
        center:new google.maps.LatLng(33.888630, 35.495480), 
        zoom:12, 
        mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 

       var map = new google.maps.Map(document.getElementById("sample"),mapOptions); 
      } 

      google.maps.event.addDomListener(window, 'load', loadMap); 
     </script> 
    </head> 

    <body> 
     <div id = "sample" style = "width:580px; height:400px;"></div> 
    </body> 
</html> 


<?php 
get_footer(); 
?>

Quelle

2017-03-02 Nabil Jaroush

Was meinen Sie * mir helfen, diese Markierungen zu erhalten *? Wir wissen nicht, wie Ihre Daten strukturiert sind, wir kennen keine Verbindungsinformationen. Dies scheint eine Frage zu sein, die "nur für mich gemacht wird". Ich stimme zu schließen, als zu breit. Ich ermutige Sie, es selbst auszuprobieren, und kommen Sie zurück, wenn Sie eine konkrete Frage haben, und wir können versuchen, Ihnen weiter zu helfen. – FrankerZ

Sie müssen die Daten von Ihrer Datenbank zu PHP und von PHP zu Javascript durch ein JSON-Objekt übergeben. Dann müssen Sie ein Array im JSON-Objekt durchlaufen, eine Markierung für jeden innerhalb der Schleife hinzufügen und einen Event-Handler setzen. In dem Callback für den Event-Handler, dann erstellen Sie das InfoWindow und befüllen seinen Inhalt –

können Sie versuchen Sie dies: - Sie können Ihre Markierungen von PHP wie im Javascript erzeugen. Das folgende Beispiel aus Google Map API genommen

var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 16, 
 
      center: new google.maps.LatLng(-33.91722, 151.23064), 
 
      mapTypeId: 'roadmap' 
 
     }); 
 

 
     var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
 
     var icons = { 
 
      parking: { 
 
      icon: iconBase + 'parking_lot_maps.png' 
 
      }, 
 
      library: { 
 
      icon: iconBase + 'library_maps.png' 
 
      }, 
 
      info: { 
 
      icon: iconBase + 'info-i_maps.png' 
 
      } 
 
     }; 
 

 
     function addMarker(feature) { 
 
      var marker = new google.maps.Marker({ 
 
      position: feature.position, 
 
      icon: icons[feature.type].icon, 
 
      map: map 
 
      }); 
 
     } 
 

 
     var features = [ 
 
      { 
 
      position: new google.maps.LatLng(-33.91721, 151.22630), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91539, 151.22820), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91747, 151.22912), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91910, 151.22907), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91725, 151.23011), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91872, 151.23089), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91784, 151.23094), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91682, 151.23149), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91790, 151.23463), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91666, 151.23468), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.916988, 151.233640), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), 
 
      type: 'library' 
 
      } 
 
     ]; 
 

 
     for (var i = 0, feature; feature = features[i]; i++) { 
 
      addMarker(feature); 
 
     } 
 
     }

/* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Custom Markers</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>

Eigenschaften Array Ersetzen mit folgenden php

<?php 
$prependStr ="" 
foreach($wpdb->get_results("SELECT * FROM your_map_table_name ") as $key => $row) { 
$latitude = $row->latitude; 
$longitude = $row->longitude; 
$info = $row->info; 
echo $prependStr; 
?> 
{ 
    position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $latitude; ?>), 
    type: '<?php echo $info; ?>' 
} 
<?php 
$prependStr =","; 
} 
?>

Quelle

2017-03-02 06:52:49

danke für Ihre Antwort aber in ** var features = [] ** Array Wie kann ich dieses Array durch eine Daten aus MYSQL-Datenbank abgerufen? –

@NabilJaroush hat die Antwort aktualisiert –

Wordpress: Wie man Markierungen auf Google Map hinzufügt, wo seine Daten von MYSQL

Code enthalten:

Antwort

Verwandte Themen