2017-12-20 10 views
-1

私はタクシーの予約アプリケーションで働いています。これは、検索対象のGoogleマップも表示されています。とdrop locationがあり、の中にconditionが入っています。この周囲。 Googleでこのアドレスを検索すると、赤色のポリゴンが表示されます。しかし、私は、ユーザーの宛先がこの境界線の内側かこの境界線の外側にあるかどうかを調べるためにGoogleでヘルプを見つけられませんでした。Google Maps APIを使用しているかどうかを確認する方法

ヒントがあれば大丈夫です。リクエストと誰がコメントを捧げた人に

Check the map here, i want this area cordinates, i want to know if searched location lies inside this area or outside this area

+0

[本](http://www.geocodezip.com/geoxml3_test/v3_collection-map2e.html)のようなもの、または[ this](http://www.geocodezip.com/v3_collection-map2e_FT.html)? – geocodezip

+0

この場所を検索すると、「I-285、Atlanta、GA、USA」地図に「285」の番号が付いた境界エリアが表示されます。私はその地域の座標を欲しい –

答えて

0

感謝。私は問題を解決し、私はちょうど完全なコードを追加しています、ここに誰かがそれを必要とするかもしれません。

オートコンプリートアドレス用の2つの入力ボックス、場所の検索、およびスクリプトが、選択した場所がポリゴンの内側にあるかどうかを検索します。ポリゴンはユーザーには表示されません。私はそれを望んでいないので、表示する場合は、この行のコメントを削除してくださいpolygon.setMap(map)。スクリプトは経路と期間を表示します。悪い英語で申し訳ありません。

HTML

<input type="text" id="source"> 
<input type="text" id="destination"> 
<div id="divAlertError"></div> 

<div id="map"></div> 

JAVASCRIPT

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&language=us&key=YOUR_MAP_API_KEY" aysnc defer></script> 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeControl: false, 

     center: {lat: 33.63663200000001, lng: -84.49224500000003}, 
     zoom: 10 
    }); 

    new AutocompleteDirectionsHandler(map); 
    } 

    /** 
    * @constructor autocomplete 
    */ 
    function AutocompleteDirectionsHandler(map) { 

    this.map = map; 
    this.originPlaceId = null; 
    this.destinationPlaceId = null; 
    this.travelMode = 'DRIVING'; 
    //this.polygon=''; 
    var originInput = document.getElementById('source'); 
    var destinationInput = document.getElementById('destination'); 
    //var modeSelector = document.getElementById('mode-selector'); 
    var infowindow = new google.maps.InfoWindow(); 
    //var infowindowContent = document.getElementById('infowindow-content'); 
    this.directionsService = new google.maps.DirectionsService; 
    this.directionsDisplay = new google.maps.DirectionsRenderer; 
    this.geocoder = new google.maps.Geocoder(); //Added on 27/09/2016 
    this.bounds = new google.maps.LatLngBounds(); 


    var originAutocomplete = new google.maps.places.Autocomplete(
     originInput, {placeIdOnly: true}); 
    var destinationAutocomplete = new google.maps.places.Autocomplete(
     destinationInput, {placeIdOnly: true}); 

    // Define the LatLng coordinates for the polygon. 
     var atlantaArea = [ 
      {lat: 33.636632 , lng: -84.492245}, 
      {lat: 33.656424 , lng: -84.497566}, 
      {lat: 33.690281 , lng: -84.500055}, 
      {lat: 33.722983 , lng: -84.50263}, 
      {lat: 33.753532 , lng: -84.495506}, 
      {lat: 33.764842 , lng: -84.493361}, 
      {lat: 33.786852 , lng: -84.493146}, 
      {lat: 33.799477 , lng: -84.488468}, 
      {lat: 33.825221 , lng: -84.489541}, 
      {lat: 33.843117 , lng: -84.487481}, 
      {lat: 33.86418 , lng: -84.479628}, 
      {lat: 33.884418 , lng: -84.470015}, 
      {lat: 33.890296 , lng: -84.460917}, 
      {lat: 33.906397 , lng: -84.431992}, 
      {lat: 33.915942 , lng: -84.406672}, 
      {lat: 33.912167 , lng: -84.379163}, 
      {lat: 33.910208 , lng: -84.361782}, 
      {lat: 33.912024 , lng: -84.357147}, 
      {lat: 33.913769 , lng: -84.352083}, 
      {lat: 33.918007 , lng: -84.338307}, 
      {lat: 33.920322 , lng: -84.30522}, 
      {lat: 33.912986 , lng: -84.286294}, 
      {lat: 33.902906 , lng: -84.274063}, 
      {lat: 33.891757 , lng: -84.2593}, 
      {lat: 33.885487 , lng: -84.251575}, 
      {lat: 33.851261 , lng: -84.246597}, 
      {lat: 33.846431 , lng: -84.247198}, 
      {lat: 33.827218 , lng: -84.252477}, 
      {lat: 33.816023 , lng: -84.251447}, 
      {lat: 33.802936 , lng: -84.250138}, 
      {lat: 33.778184 , lng: -84.241297}, 
      {lat: 33.764753 , lng: -84.232392}, 
      {lat: 33.752604 , lng: -84.231899}, 
      {lat: 33.737171 , lng: -84.230762}, 
      {lat: 33.714702 , lng: -84.240954}, 
      {lat: 33.698994 , lng: -84.266081}, 
      {lat: 33.683997 , lng: -84.310048}, 
      {lat: 33.672854 , lng: -84.328415}, 
      {lat: 33.668015 , lng: -84.340324}, 
      {lat: 33.65203 , lng: -84.367125}, 
      {lat: 33.633023 , lng: -84.400975}, 
      {lat: 33.624894 , lng: -84.422486}, 
      {lat: 33.617139 , lng: -84.438515}, 
      {lat: 33.620516 , lng: -84.460616}, 
      {lat: 33.619319 , lng: -84.483039}, 
      {lat: 33.623143 , lng: -84.488318} 
     ]; 

     // Construct the polygon. 
     var polygon = new google.maps.Polygon({ 
     paths: atlantaArea, 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 3, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35 
     }); 
     //polygon.setMap(map); 
     this.directionsDisplay.setMap(map);  

    this.setupPlaceChangedListener(this.map,infowindow,originAutocomplete, 'ORIG',polygon); 
    this.setupPlaceChangedListener(this.map,infowindow,destinationAutocomplete, 'DEST',polygon); 

    } 


    /*AutocompleteDirectionsHandler.prototype.drawPolygon = function(map) 
    { 

    }*/ 


    /*place changed listner*/ 
    AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(map,infowindow,autocomplete, mode,polygon) { 
    var me = this; 
    autocomplete.bindTo('bounds', this.map); 
    autocomplete.addListener('place_changed', function() { 
     var place = autocomplete.getPlace(); 
     if (!place.place_id) { 
     window.alert("Please select an option from the dropdown list."); 
     return; 
     } 
     var newBounds = new google.maps.LatLngBounds(me.bounds.getSouthWest(), me.bounds.getNorthEast()); 

     if (!place.geometry) { 
     me.geocodeAddress(place.name,polygon);   
     //window.alert("Autocomplete's returned place contains no geometry"); 
     //return; 
     };   

     if (mode === 'ORIG') { 
     me.originPlaceId = place.place_id; 
     } else { 
     me.destinationPlaceId = place.place_id; 
     } 
     me.route(map,infowindow); 


    });/*listner*/ 

    }; 

    AutocompleteDirectionsHandler.prototype.geocodeAddress = function(addr,polygon) { 
     var me = this; 
     me.geocoder.geocode({'address': addr}, function(results, status) { 
     if (status === 'OK') { 
      var newBounds = new google.maps.LatLngBounds(me.bounds.getSouthWest(), me.bounds.getNorthEast()); 
      //console.log(results); 
      //newBounds.extend(results[0].geometry.location); 
      //map.fitBounds(newBounds); 
      if (google.maps.geometry.poly.containsLocation(results[0].geometry.location, polygon)){ 
      jQuery('#divAlertError').text('The area contains the address'); 
      } else { 
      jQuery('#divAlertError').text('The address is outside of the area.'); 
      }; 
     } else { 
     jQuery('#divAlertError').text('Geocode was not successful for the following reason: ' + status); 
     } 
     }); 
    }; 

    /*Route*/ 
    AutocompleteDirectionsHandler.prototype.route = function(map,infowindow) { 
    if (!this.originPlaceId || !this.destinationPlaceId) { 
     return; 
    } 
    var me = this; 

    this.directionsService.route({ 
     origin: {'placeId': this.originPlaceId}, 
     destination: {'placeId': this.destinationPlaceId}, 
     travelMode: this.travelMode 
    }, function(response, status) { 
     if (status === 'OK') { 
     me.directionsDisplay.setDirections(response); 
     console.log(response); 
     me.computeTotals(map,response,infowindow); 
     //console.log(infowindow); 
     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 
    }); 
    }; 

    /*Find Distance and Duration*/ 
    AutocompleteDirectionsHandler.prototype.computeTotals = function(map,result,infowindow) { 
     var me = this;   

     var service = new google.maps.DistanceMatrixService(); 
     service.getDistanceMatrix({ 
      origins: [result.request.origin], 
      destinations: [result.request.destination], 
      travelMode: google.maps.TravelMode.DRIVING, 
      unitSystem: google.maps.UnitSystem.METRIC, 
      avoidHighways: false, 
      avoidTolls: false 
     }, function (response, status) { 
      if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") { 
      console.log(response); 
       var distance = response.rows[0].elements[0].distance.text; 
       //convert meters in km then Miles 
       var meter = response.rows[0].elements[0].distance.value; 
       var distanceInMiles = (Number(meter)*0.00062137).toFixed(2); 
       var duration = response.rows[0].elements[0].duration.text; 

      infowindow.setContent('<i style="color:blue;" class="fa fa-car fa-2x"></i><center><b>'+distance+'('+distanceInMiles+' miles) '+'<br>'+duration+'</b></center>'); 
      infowindow.setPosition(map.getCenter()); 
      infowindow.open(map); 

      } else { 
       alert("Unable to find the distance via road."); 
      } 
     }); 
    } 
関連する問題