2017-01-08 225 views
0
<script> 

    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: { lat: 33.738045, lng: 73.084488 }, 
      zoom: 10 
     }); 
     new AutocompleteDirectionsHandler(map); 
    } 



    /** 
    * @constructor 
    */ 
    function AutocompleteDirectionsHandler(map) { 
     this.map = map; 
     this.originPlaceId = null; 
     this.destinationPlaceId = null; 
     this.travelMode = 'DRIVING'; 
     var originInput = document.getElementById('origin-input'); 
     var destinationInput = document.getElementById('destination-input'); 
     var modeSelector = document.getElementById('mode-selector'); 
     this.directionsService = new google.maps.DirectionsService; 
     this.directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); 
     this.directionsDisplay.setMap(map); 

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

     this.setupClickListener('changemode-walking', 'DRIVING'); 


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

     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector); 
    } 

    // Sets a listener on a radio button to change the filter type on Places 
    // Autocomplete. 
    AutocompleteDirectionsHandler.prototype.setupClickListener = function (id, mode) { 
     var radioButton = document.getElementById(id); 
     var me = this; 
     radioButton.addEventListener('click', function() { 
      me.travelMode = 'DRIVING'; 
      me.route(); 
     }); 
    }; 

    AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function (autocomplete, mode) { 
     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; 
      } 
      if (mode === 'ORIG') { 
       me.originPlaceId = place.place_id; 
      } else { 
       me.destinationPlaceId = place.place_id; 
      } 
      me.route(); 
     }); 

    }; 

    AutocompleteDirectionsHandler.prototype.route = function() { 
     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); 
      } else { 
       window.alert('Directions request failed due to ' + status); 
      } 
     }); 
    }; 


</script> 

目前我正在在asp.net C#Web表单的一个项目,其读取位置,并将其保存在数据库如何经度阅读国家城市纬度的地图API

我想找到这个国家的城市纬度当拖动标记并想要根据标记位置绑定搜索框时的经度

回答

0

如果您在拖动路线之前详细了解(国家,城市,纬度,经度)初始起点和终点,请删除{ placeIdOnly: true }来自google.maps.places.Autocomplete()的电话。

如果你身在何处标记拖动到的地方,细节(国家,城市,纬度,经度)之后,当用户拖动方向,你需要

  1. 添加监听器您的directionsDisplay'directions_changed'。请参阅directions-draggable example
  2. 在回调函数中,检查start_location的所有legsend_location最后一个,以获取航点的位置。
相关问题