在WordPress中顯示多個地圖指針

我想在來自自定義帖子類型的地圖上顯示多個地圖指針。我能夠獲得單個地圖指針。我如何在地圖上獲得多個地圖指針？這是我的代碼。在WordPress中顯示多個地圖指針

<style> 
      #map_wrapper { 
       height: 400px; 
      } 

      #map_canvas { 
       width: 100%; 
       height: 100%; 
      } 
     </style> 
     <?php 
     $location = get_field('google_map_lat_long'); 
     if (!empty($location)): 
      ?> 
      <?php /* ?> 
       <div class="acf-map"> 
       <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div> 
       </div> 
       <?php */ ?> 
      <!-- End Content --> 

      <script> 
       jQuery(function ($) { 
        // Asynchronously Load the map API 
        var script = document.createElement('script'); 
        script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&sensor=false&callback=initialize"; 
        document.body.appendChild(script); 
       }); 

       function initialize() { 
        var map; 
        var bounds = new google.maps.LatLngBounds(); 
        var mapOptions = { 
         mapTypeId: 'roadmap' 
        }; 

        // Display a map on the page 
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
        map.setTilt(45); 

        // Multiple Markers'' 
        // $info=''; 
        var markers = [ 
    <?php 
    echo '["' . $location['address'] . '",' . $location['lat'] . ',' . $location['lng'] . '],'; 
    ?> 
        ]; 



        // Info Window Content 
        var infoWindowContent = [['<div class="info_content"><h3><?php echo $location['address']; ?></h3><p><?php echo $location['address']; ?></p></div>']]; 


        // Display multiple markers on a map 
        var infoWindow = new google.maps.InfoWindow(), marker, i; 

        // Loop through our array of markers & place each one on the map 
        for (i = 0; i < markers.length; i++) { 
         var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
         bounds.extend(position); 
         marker = new google.maps.Marker({ 
          position: position, 
          map: map, 
          title: markers[i][0] 
         }); 

         // Allow each marker to have an info window  
         google.maps.event.addListener(marker, 'click', (function (marker, i) { 
          return function() { 
           infoWindow.setContent(infoWindowContent[i][0]); 
           infoWindow.open(map, marker); 
          } 
         })(marker, i)); 

         // Automatically center the map fitting all markers on the screen 
         map.fitBounds(bounds); 
        } 

        // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) { 
         this.setZoom(14); 
         google.maps.event.removeListener(boundsListener); 
        }); 

       } 
      </script> 

      <?php 
     endif; 
     ?>  


    <?php endwhile; ?> 
    <div id="map_wrapper"> 
     <div id="map_canvas" class="mapping"></div> 
    </div>

謝謝:)

來源

2016-07-23 Dreamerz

不知道爲什麼你有問題添加多個標記到地圖，但你也許能制定出什麼，從這個例子做。

<!doctype html> 
<html> 
    <head> 
     <title>Google maps - multiple markers example</title> 

     <script type='text/javascript'> 
      /* data, derived from a db call and written as a json object */ 
      var json={ 
       "results":{ 
        "0":{"name":"Kinnettles","lat":"56.61543329027024","lng":"-2.9266123065796137"}, 
        "1":{"name":"Nathro","lat":"56.793249595719956","lng":"-2.8623101711273193"}, 
        "2":{"name":"Ark Hill","lat":"56.57065514278748","lng":"-3.0511732892761074"}, 
        "3":{"name":"Dodd Hill","lat":"56.54251020079966","lng":"-2.9051538305053555"}, 
        "4":{"name":"Govals","lat":"56.582320876071854","lng":"-2.9509015874633633"}, 
        "5":{"name":"Carsegownie","lat":"56.67951330362271","lng":"-2.8062983350524746"}, 
        "6":{"name":"Frawney","lat":"56.56806620951482","lng":"-2.9501720266113125"}, 
        "7":{"name":"North Tarbrax","lat":"56.57144715546598","lng":"-2.92476614282225"}, 
        "8":{"name":"The Carrach","lat":"56.6938437674986","lng":"-3.131382067657455"}, 
        "9":{"name":"Glaxo","lat":"56.70431711148748","lng":"-2.4660869436035"} 
       } 
      }; 

      /* callback function */ 
      function initialise(){ 

       var bounds = new google.maps.LatLngBounds(); 
       var infoWindow = new google.maps.InfoWindow(); 

       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom:10, 
        center: { lat: 56.6154, lng: -2.9266 } 
       }); 

       /* process json data and add a marker for each location */ 
       var data=json.results; 
       for(var o in data){ 

        var latlng=new google.maps.LatLng(data[o].lat, data[o].lng); 
        var title=data[o].name; 

        var marker = new google.maps.Marker({ 
         position: latlng, 
         map: map, 
         title: title, 
         content:title 
        }); 

        google.maps.event.addListener(marker, 'click', function(event){ 
         infoWindow.setContent(this.content); 
         infoWindow.open(map, this); 
        }.bind(marker)); 

        bounds.extend(latlng); 
       } 
       map.fitBounds(bounds); 
      } 
     </script> 
     <script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&callback=initialise' type='text/javascript'></script> 
     <style type='text/css'> 
      html, body { 
       height: 100%; 
       margin: 0; 
       padding: 0; 
      } 
      #map{ 
       display:block; 
       box-sizing:border-box; 
       width:800px; 
       height:600px; 
       margin:1rem auto; 
       float:none; 
       border:3px solid black; 
      } 
     </style> 
    </head> 
    <body> 
     <div id='map'></div> 
    </body> 
</html>

來源

2016-07-23 08:41:44 RamRaider

我是newbee，我在想，如果我能從該腳本得到1個Map指針，我也可以得到多個指針。除了改變整個代碼和結構以外，可能只需要修改一小段代碼 – Dreamerz

如果沒有看到標記的實際數據，它很難精確，但看起來你只有一個項目的數組 - 我只是發佈了以上給出的指導，而不是你應該這樣做的方式或作爲所有你的困境的答案.. – RamRaider

非常感謝，這有幫助 – Dreamerz

在WordPress中顯示多個地圖指針

回答

相關問題