Question

如何在Google地图中添加标记并在Angular 4中显示坐标

Answer 1

我已经使用了Google地图n angular4 apps ..就像这样：

/////////// 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",

在谷歌地图中添加标记并显示坐标Angular 4

1 个答案: