doupao1978
doupao1978
2017-07-20 18:24
浏览 56
已采纳

Google Maps API使用PHP和MySQL获取路线

I'm trying to make Google Maps automatically set driving routes for destinations that are stored in my database. Basically, I have a few addresses in my databases(i.e: manufacturers) and I want to be able to enter a zip code(or an address) to receive the directions from that zipcode/address to all the manufacturers available(and maybe for a fancy extra, fetch the closest manufacturer). I've never used Google Maps API before so I'm fairly confused by it. So far, I've only been able to set markers to the available manufacturers. As for the driving routes, I've looked for hours and it's a bit complex to digest. What way would you suggest me to take(no pun intended) with this piece of code that I have so far?

echo "<script>
        var locations = 
        [
        ";
            for($i = 0; $i < sizeof($locations); $i++)
            {
                echo "['".$locations[$i][0]."', '".$locations[$i][1]."', ".$locations[$i][2].", ".$locations[$i][3].", ". ($i+1) ." ]";
                if (! ($i == (sizeof($locations)-1)) )
                    echo ",";
            }
        echo "];

        var map = new google.maps.Map(document.getElementById('map'), 
        {
            zoom: 15,
            center: new google.maps.LatLng(45.892235, -72.5371626),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) 
        {
            marker = new google.maps.Marker(
            {
                position: new google.maps.LatLng(locations[i][2], locations[i][3]),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) 
            {
                return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
          })(marker, i));
        }
</script>";

图片转代码服务由CSDN问答提供 功能建议

我正在尝试让Google地图自动设置存储在我的数据库中的目的地的行车路线。 基本上,我在我的数据库中有一些地址(即:制造商),我希望能够输入邮政编码(或地址)来接收从该邮政编码/地址到所有可用制造商的指示(也许是 花哨的额外,取得最近的制造商)。 我之前从未使用过谷歌地图API,所以我对此感到非常困惑。 到目前为止,我只能为可用的制造商设置标记。 至于驾驶路线,我已经看了几个小时,消化起来有点复杂。 你建议我用这段代码到目前为止用什么方式(没有双关语)?

  echo“&lt; script&gt; 
 var locations = \  n [
“; 
 for($ i = 0; $ i&lt; sizeof($ locations); $ i ++)
 {
 echo”['“。$ locations [$ i] [0]。”  ','“。$ locations [$ i] [1]。”',“。$ locations [$ i] [2]。”,“。$ locations [$ i] [3]。”,“。  ($ i + 1)。“]”; 
 if(!($ i ==(sizeof($ locations)-1)))
 echo“,”; 
} 
 echo“]; 
  
 var map = new google.maps.Map(document.getElementById('map'),
 {
 zoom:15,
 center:new google.maps.LatLng(45.892235,-72.5371626),
 mapTypeId  :google.maps.MapTypeId.ROADMAP 
}); 
 
 var infowindow = new google.maps.InfoWindow(); 
 
 var marker,i; 
 
 for(i = 0; i&lt;  ; locations.length; i ++)
 {
 marker = new google.maps.Marker(
 {
 position:new google.maps.LatLng(locations [i] [2],locations [i] [3]  ),
 map:map 
}); 
 
 google.maps.event.addListener(marker,'click',(function(marker,i)
 {
 return function(){
 infowindow  .setContent(locations [i] [0]); 
 infowindow.open(map,marker); 
} 
})(marker,i)); 
  } 
&lt; / script&gt;“; 
   
 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dopuz8728
    dopuz8728 2017-07-20 19:09
    已采纳

    Here you have a first answer to your problem, hope this can help.

    jQuery(document).ready(function(){
    
      var locations = [
        ["a","Title A",46.3,-72.5],
        ["b","Title B",45.9,-72.4],
        ["c","Title C",45.6,-72.1]
      ] ;
    
      var map = new google.maps.Map(
        document.getElementById('map'), 
        {
          zoom: 7,
          center: new google.maps.LatLng(45.892235, -72.5371626),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
      );
    
      jQuery(locations).each(function(k,v) {
        
        locations[k].push('what s in index 4 ?') ; // Push in index 4
        
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(v[2],v[3]),
          map: map,
          title: v[1]
        })
        locations[k].push(marker) ;
    
      }) ;
    
      var directionsService = new google.maps.DirectionsService;
      var directionDisplays = [] ; // We need to store displays to be abled to remove them on each "getRoute" click.
    
      document.getElementById('getRoutes').addEventListener('click', getRoutes);
    
      function getRoutes() {
    
        // Removing existing routes if any
        for ( i = 0 ; i < directionDisplays.length ; i++ )
          directionDisplays[i].setMap(null) ;
    
        directionDisplays = [] ;
    
        // Now the important part : for each location we look for the route
        jQuery(locations).each(function(k,v) {
            
            directionsService.route({
                origin: document.getElementById('whereami').value,
                destination: new google.maps.LatLng(v[2],v[3]) ,
                travelMode: 'DRIVING'
            }, function (response, status) {
              if (status === 'OK') {
                // This callback is call asynchronous, this is probably why it's complicated to access locations[k]
                var directionsDisplay = new google.maps.DirectionsRenderer ;
                directionsDisplay.setMap(map) ;
                // We remove the marker "B" added by directionsDisplay.
                directionsDisplay.setOptions( { suppressMarkers: true } );
                directionsDisplay.setDirections(response);
                directionDisplays.push(directionsDisplay) ;
                var point = response.routes[ 0 ].legs[ 0 ];
    
                // We affect the direction to the marker to make it accessible later
                locations[k][5].duration = point.distance.text ;
    
                // And know we just have to add a listener.
                locations[k][5].addListener('click',function(){
                    console.log(this.title,this.duration) ;
                }) ;
    
              } else {
                window.alert('Directions request failed due to ' + status);
              }
           }
          );
        }) ;
      }
    
    }) ;
    div#map {
    width:50% ;
    height:250px ;
    float:left ;
    }
    
    div#boutons {
    float:right;
    width:200px ;
    }
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//maps.googleapis.com/maps/api/js"></script>
    <div id="map"></div>
    <div id="boutons">
      <input type="text" id="whereami" value="Ottawa" />
      <button id="getRoutes">get routes</button>
    </div>

    </div>
    
    点赞 评论

相关推荐