在标记 Ionic Google 地图 JavaScript 之间绘制折线

Question

大家好，这是我第一次 post 在这个网站上，我在 Ionic 中的一个应用程序中工作，当你按下一个按钮时，它会用一个标记显示你的位置，你可以再次按下它来更新你的位置和在那个位置添加一个标记，我想在这个标记之间画一条折线，但我还没有成功。我知道有一些方法可以绘制多段线我的想法是提取标记的经纬度坐标，将它们保存在一个数组中然后将其设置为 "path" 来绘制多段线但是我在创建时遇到了问题像下面评论中的数组。这是我的代码：

        import { Component, ViewChild, ElementRef } from '@angular/core';
        import { NavController} from 'ionic-angular';
        import { Geolocation } from '@ionic-native/geolocation';

    declare var google;
    @Component({
      selector: 'home-page',
      templateUrl: 'home.html'
    })

export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;
  me: any;
  markers=[];
  lat=[];
  long=[];
  constructor(public navCtrl: NavController, public geolocation: Geolocation) {
  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap() {

    this.geolocation.getCurrentPosition().then((position) => {

      let mylatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      let mapOptions = {
        center: mylatLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    },
    (err) => {
      console.log(err);
    });
  }


    addMarker(){
     let marker = new google.maps.Marker({
        map: this.map,
      animation: google.maps.Animation.DROP, 
      });

      let content = '<p>Posición: ' + marker.setPosition() + '</p>'

      if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
        var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
        marker.setPosition(me);


    }, 
    function(error) {
        // ...
    });    
        this.markers.push(marker);

        this.addInfoWindow(marker, content);
}
  addInfoWindow(marker, content){

    let infoWindow = new google.maps.InfoWindow({
      content: content
    });
    if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
      var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
      infoWindow.setContent('<p>Posición: ' + me + '</p>')
      }, 
      function(error) {
      // ...
     });     

    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.open(this.map, marker);
    });
  }

  setMapAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);
    }
  }
  clearMarkers() {
    this.setMapAll(null);
  }


  deleteMarkers() {
    this.clearMarkers();
    this.markers = [];
  }
// Im having problems here

  addPolyLine() {
    var poly = new Array();
    for (var j=0; j<this.lat.length;j++){
    var pos= new google.maps.LatLng(this.lat[j],this.long[j])
    poly.push(pos);
  }

      var flightPath = new google.maps.Polyline({

        path: poly,
        geodesic: true,

        strokeColor: '#FF0000',

        strokeOpacity: 1.0,

        strokeWeight: 2

      });

      flightPath.setMap(this.map);

  }

}

以及 HTML 页面：

<ion-header>
  <ion-navbar>
    <ion-title>
      MapaPrueba
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Agregar Pos</button>
    </ion-buttons>  
  </ion-navbar>
</ion-header>

<ion-content>
  <div #map id="map"></div>  

  <ion-fab left bottom>
    <button ion-fab color="light" (click)="clearMarkers()">
      <ion-icon name="eye-off"></ion-icon>
    </button>
  </ion-fab>
</ion-content>

Answer 1

官方文档和下面的文档中都有 full example。

简而言之，您必须：

创建折线并将其设置在地图上（一次）
用折线getPath()方法获取折线路径
推送你的新坐标到路径

var map;
var polyLine;
var polyOptions;

function initialize() {
    
    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(0,0)
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    polyOptions = {
        strokeColor: '#0026b3',
        strokeOpacity: 1.0,
        strokeWeight: 1,
        geodesic: true,
    }

    polyLine = new google.maps.Polyline(polyOptions);
    polyLine.setMap(map);
    
    google.maps.event.addListener(map, 'click', function(event) {

        addPoint(event);
    });
}

function addPoint(event) {
 
    var path = polyLine.getPath();
    path.push(event.latLng);

    var marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
    });
    
    map.setCenter(event.latLng);
}

initialize();

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

在标记 Ionic Google 地图 JavaScript 之间绘制折线

Draw Polyline between markers Ionic Google Maps JavaScript

javascript

google-maps-api-3

google-polyline

ionic-framework