做“沿着路线的兴趣点”在谷歌地图中

发布于 2024-11-04 07:16:08 字数 760 浏览 0 评论 0原文

我需要允许旅行者使用谷歌地图来绘制路线，然后查询我的兴趣点数据库（比方说，麦当劳的位置），然后显示距离他们将要到达的路线一两英里以内的所有这些位置服用。问题是，如何有效地获取从 google 返回的“行车路线”信息（本质上是一组纬度/经度对），并将其转换为 SQL 查询以获取距路线一定距离内的位置？

它不必非常精确，“鸟儿飞翔”与路线的距离就可以了。我最关心的是它的效率是否合理。

在数据库中，基本上每个条目都有纬度和经度，但我可以根据需要更改数据库模式。

举个例子，这个网站做了我想做的事情（如果您给出起点和终点，它将显示您将要行驶的高速公路附近的 V 形车站）： http://www.chevron.com/products/stations/stationfinder/planyourroute。 aspx

_{（来源：karmatics.com）}

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

执着的年纪 2024-11-11 07:16:08

请查看

http: //google-maps-utility-library-v3.googlecode.com/svn/tags/routeboxer/1.0/examples/routeboxer-v3.html

以下是文档：http://google-maps-utility-library-v3.googlecode.com/ svn/tags/routeboxer/1.0/docs/examples.html

您可以从 RouteBoxer 获取框坐标并将其发送到服务器端脚本进行处理

回复收藏 0 原文

望笑 2024-11-11 07:16:08

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon arrays</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
     <script>    
var map;
      function initMap() {
         map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 19.2570, lng: 72.8712},
          zoom: 10,
        });

        var directionService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer({ map: map }); 
        var request = {
           origin: "<?php echo $source;?>",
          destination: "<?php echo $destination;?>", 
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        }


        directionService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {

            var path = result.routes[0].overview_path;

            var poly = new google.maps.Polyline({
              strokeColor: '#FF0000',
              strokeOpacity: 1.0,
              strokeWeight: 3,
             map: map,
            });
            poly.setPath(path);


            var myTollLocations = [
              <?php

                 isset($hello); //$hello is array which comes from database
              foreach ($hello as $key => $value) {
                ?>
                  new google.maps.LatLng(<?php echo $hello[$key]->latitude;?>, <?php echo $hello[$key]->longitude;?>),
                <?php
              }
              ?>

            ];


            for (var i = 0; i < myTollLocations.length  ; i++) {
              if (google.maps.geometry.poly.isLocationOnEdge(myTollLocations[i], poly,0.005)) {
                  console.log("found");


                }else{
                  console.log("Not Found!");
                }
            };




           <?php
           $markersLocation =  array($source, $destination);
             foreach ($markersLocation as $key => $values) {

             ?>


          //Source Marker( convert address to LatLng for marker)   
           var geocoder = new google.maps.Geocoder();            
            geocoder.geocode( { 'address': '<?php echo $markersLocation[$key]?>'}, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                }

                console.log(latitude);
                console.log(longitude);

                var myLatLng = {lat: latitude, lng: longitude};



                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 'source',
                    icon: 'http://innowrap.com/clients/digitoll/ic_red_marker.png'

                });

            });


            <?php
           }
            ?>


          } else {
            alert("Directions query failed: " + status);
          }
        });


      }


    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=ADD YOUR API KEY&libraries=geometry&callback=initMap"
         async defer></script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon arrays</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
     <script>    
var map;
      function initMap() {
         map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 19.2570, lng: 72.8712},
          zoom: 10,
        });

        var directionService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer({ map: map }); 
        var request = {
           origin: "<?php echo $source;?>",
          destination: "<?php echo $destination;?>", 
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        }


        directionService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {

            var path = result.routes[0].overview_path;

            var poly = new google.maps.Polyline({
              strokeColor: '#FF0000',
              strokeOpacity: 1.0,
              strokeWeight: 3,
             map: map,
            });
            poly.setPath(path);


            var myTollLocations = [
              <?php

                 isset($hello); //$hello is array which comes from database
              foreach ($hello as $key => $value) {
                ?>
                  new google.maps.LatLng(<?php echo $hello[$key]->latitude;?>, <?php echo $hello[$key]->longitude;?>),
                <?php
              }
              ?>

            ];


            for (var i = 0; i < myTollLocations.length  ; i++) {
              if (google.maps.geometry.poly.isLocationOnEdge(myTollLocations[i], poly,0.005)) {
                  console.log("found");


                }else{
                  console.log("Not Found!");
                }
            };




           <?php
           $markersLocation =  array($source, $destination);
             foreach ($markersLocation as $key => $values) {

             ?>


          //Source Marker( convert address to LatLng for marker)   
           var geocoder = new google.maps.Geocoder();            
            geocoder.geocode( { 'address': '<?php echo $markersLocation[$key]?>'}, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                }

                console.log(latitude);
                console.log(longitude);

                var myLatLng = {lat: latitude, lng: longitude};



                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 'source',
                    icon: 'http://innowrap.com/clients/digitoll/ic_red_marker.png'

                });

            });


            <?php
           }
            ?>


          } else {
            alert("Directions query failed: " + status);
          }
        });


      }


    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=ADD YOUR API KEY&libraries=geometry&callback=initMap"
         async defer></script>
  </body>
</html>

回复收藏 0 原文

~没有更多了~