は、Googleマップにマーカーを追加し、ディスプレイは4

Question

角度を調整するGoogleマップとディスプレイにマーカーを追加する方法を、私はグーグルマップを使用しましたアンギュラ4

Answer 1

座標のn angular4このapps..like：

/////////// MY MODEL ///////////////// 
    export class GoogleDirection { 
     public lat: number = 0; 
     public long: number = 0; 
    } 

///////////////////////////////////// 


    /////////// MY COMPONENT (NOT ALL) ///////////////// 
    declare var $: any; 

    declare var google: any; 
    public distance : number=0; 

    findPosition() { 

      let to = "Milan"; 
      let from= "Turin"; 


      let froom: GoogleDirection; 
      let too: GoogleDirection; 

      this.GetLatLong(from).then((resp) => { 
      froom = resp; 
      if (too && froom) { 
       this.GetDirection(froom, too); 
      } 
      }).catch(() => { 
      this._toasterService.pop('warning', 'Attenzione', 'Indirizzo di partenza errato'); 
      }); 

      this.GetLatLong(to).then((resp) => { 
      too = resp; 
      if (too && froom) { 
       this.GetDirection(froom, too); 
      } 
      }).catch(() => { 
      this._toasterService.pop('warning', 'Attenzione', 'Indirizzo di arrivo errato'); 
      }); 

     } 



    /** 
     * Function to retrive LatLong from Google 
     * @param address 
     */ 
     private GetLatLong(address: string): Promise<GoogleDirection> { 

     return new Promise<GoogleDirection>((resolve, reject) => { 
      var geocoder = new google.maps.Geocoder(); 

      var result = ""; 

      geocoder.geocode({ 'address': address }, (results, status) => { 

      if (!results || results.length <= 0) return reject(undefined); 

      var latitude = results[0].geometry.location.lat(); 
      var longitude = results[0].geometry.location.lng(); 
      console.log("lat: " + latitude + ", long: " + longitude); 

      var result = new GoogleDirection(); 
      result.lat = latitude; 
      result.long = longitude; 

      resolve(result); 

      }, (err) => { 
      reject(err); 
      }); 
     }); 


     } 


     /** 
     * Function to retrive Direction from Google 
     * @param from 
     * @param to 
     */ 
     private GetDirection(from: GoogleDirection, to: GoogleDirection) { 


     var map = new google.maps.Map(document.getElementById("maps"), { 
      zoom: 6, 
      center: { lat: 45.438384, lng: 10.991622 } 
     }); 

     var directionsService = new google.maps.DirectionsService; 
     var directionsDisplay = new google.maps.DirectionsRenderer; 

     directionsDisplay.setMap(map); 

     directionsService.route({ 
      origin: { lat: from.lat, lng: from.long }, 
      destination: { lat: to.lat, lng: to.long }, 
      waypoints: [], 
      optimizeWaypoints: true, 
      travelMode: 'DRIVING' 
     }, (response, status) => { 
      if (status === 'OK') { 
      directionsDisplay.setDirections(response); 
      this.GetDistance(from, to).then((km) => { 
       this.distance = km; 

      }); 
      } else { 
      // window.alert('Directions request failed due to ' + status); 
      console.log(status); 
      } 
     }); 
     } 


     /** 
     * Function to retrive Distance KM from Google 
     * @param from 
     * @param to 
     */ 
     private GetDistance(from: GoogleDirection, to: GoogleDirection): Promise<number> { 

     return new Promise<number>((resolve, reject) => { 

      var origin = new google.maps.LatLng(from.lat, from.long); 

      var destination = new google.maps.LatLng(to.lat, to.long); 


      var service = new google.maps.DistanceMatrixService(); 
      service.getDistanceMatrix(
      { 
       origins: [origin], 
       destinations: [destination], 
       travelMode: 'DRIVING', 
       avoidHighways: false 
      }, (response, status) => { 
       if (status === 'OK') { 
       console.log(response); 

       var rows = response && response.rows && response.rows.length > 0 ? response.rows[0] : undefined; 
       if (!rows) return reject(0); 

       var element = rows.elements && rows.elements.length > 0 ? rows.elements[0] : undefined; 
       if (!element) return reject(0); 

       var distanceTxt = element.distance && element.distance.text ? element.distance.text : ""; 
       if (!distanceTxt) return reject(0); 

       distanceTxt = distanceTxt as string; 
       // esempio: input "1.000,5 km", output "1000.5" 
       distanceTxt = distanceTxt.replace(".", "").toLowerCase().replace("km", "").trim().replace(",", "."); 
       var distance = Math.ceil(parseFloat(distanceTxt)); 
       console.log(distance); 
       resolve(distance); 
       } else { 
       // window.alert('Directions request failed due to ' + status); 
       console.log(status); 
       reject(0) 
       } 
      }); 



     }); 

     } 

    ///////////////////////////////////// 

を

次にHTMLで：

<div class="btn-conferma-tratta-box"> 
        <button class="btn btn-info btn-conferma-tratta" (click)="findPosition()"><i class="material-icons">map</i> visualizza itinerario</button> 




        <div id="maps"></div> 
       </div> 

希望すると助かります！ package.jsonで

P.s："googleapis": "^19.0.0",