当我添加地理位置时,Google地图中的路线停止工作

时间:2017-01-22 10:21:57

标签: javascript google-maps geolocation directions

我正在努力让Google地图指南与地理定位一起使用(使用Google地图提供的示例)。单独工作,但结合时有一个问题,地图不会显示路径(但自动完成工作正常)。

use admin
db.createUser({user:"RootAdmin",pwd:"blahblah",roles:["root"]})

1 个答案:

答案 0 :(得分:0)

我已尝试将路径放在不同的位置,并最终使其工作。 @Jaromanda X - 感谢您的想法:)

 function initMap() {


if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      var map = new google.maps.Map(document.getElementById('map'), {
          mapTypeControl: false,
          center: {lat:position.coords.latitude, lng:position.coords.longitude},
          zoom: 10
        });

     var marker2 = new google.maps.Marker({
  position: {lat:50.671064, lng:17.926138},
    draggable: true,
  map: map,
  icon: 'http://emojipedia-us.s3.amazonaws.com/cache/1e/4d/1e4d8093e7011575d9266598a06d8ecb.png',
});

var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat:position.coords.latitude, lng:position.coords.longitude},
        pov: {
          heading: 34,
          pitch: 10
        }
      });
      var usermarker = new google.maps.Marker({
  position: {lat:position.coords.latitude, lng:position.coords.longitude},
    draggable: true,
  map: map,
  icon: 'http://x3.cdn03.imgwykop.pl/c3201142/comment_aBtolaUIxKS7cvUnii43PWDPT3Lqduc2,w400.jpg',
});
  new AutocompleteDirectionsHandler(map);
      });
 /**
        * @constructor
       */
      function AutocompleteDirectionsHandler(map) {
        this.map = map;
        this.originPlaceId = null;
        this.destinationPlaceId = null;
        this.travelMode = 'WALKING';
        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;
        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', 'WALKING');
        this.setupClickListener('changemode-transit', 'TRANSIT');
        this.setupClickListener('changemode-driving', '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 = mode;
          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);
          }


            map.setStreetView(panorama);

        });

      };
}
}