跟踪用户绘制折线对齐道路地图

时间:2017-11-21 17:20:58

标签: javascript bing-maps

想知道是否有人有任何经验或可以帮助逻辑,用Bing地图跟踪用户(汽车)

当用户旅行时,应该绘制一条线路,但是要抓住道路,就像我现在设置的方式一样,线路将通过建筑物绘制。

因为只要位置有更新,就会计算2个点,并在地图上添加一行

(目前我正在使用watchPosition,但将来会每隔30秒获得一次位置)

  watchPos() {
    let options = { timeout: 60000 }
    this.watchId = navigator.geolocation.watchPosition((position) => {
      this.lat = position.coords.latitude;
      this.lng = position.coords.longitude;
      this.setMap()
      console.log(this.lat, this.lng)
    }, this.errorHandler, options);

  }
  setMap() {
    this.loc = new Microsoft.Maps.Location(this.lat, this.lng);
    if (!this.initialised) {
      this.oldLoc = this.loc;
      this.initialised = true
      this.map = new Microsoft.Maps.Map(this.driveMap.nativeElement, {
        credentials: CONFIG.BING_API_KEY,
        center: this.loc,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        navigationBarMode: 2,
        zoom: this.zoom
      });
      this.user = new Microsoft.Maps.Pushpin(this.loc, { icon: '../images/icon.svg' });
      this.map.entities.push(this.user);
      // console.log(loc)
    } else {
      // Draw line
      // from this.oldLoc to this.loc
      let lineVertices = new Array(this.oldLoc, this.loc);
      let line = new Microsoft.Maps.Polyline(lineVertices);
      // Then set oldLoc to new loc
      this.oldLoc = this.loc
      this.map.entities.push(line);
      this.map.setView({
        center: this.loc
      });
      this.user.setLocation(this.loc);
    }
  }

1 个答案:

答案 0 :(得分:1)

Bing Maps将在下周末推出一款专为此设计的即时API。您传入GPS坐标并将其捕捉到道路上,此外,如果您传入一系列点,您还可以让它返回通过捕捉点的逻辑路径。观看Bing Maps博客,了解公告:https://blogs.bing.com/maps