使用 Google Places Library 通过 Google Maps 和 Ionic 显示预定关键字的所有位置标记

Question

我想在我的地图上为每个地点搜索结果显示一个标记，但它不起作用。

---编辑---

我试图调试找出我遗漏了什么以及为什么标记没有出现，但我无法弄清楚。就算答案很明显，以我现在的手头也未必能看出来。我已经使用 setMarker() 函数和要在创建的地图上显示的标记选项对代码进行了一些编辑，但这似乎并不是标记不显示的原因的答案。我不必在特定的纬度和经度处创建标记，而是使用预先确定的搜索关键字搜索当前位置周围的区域，在本例中为 "McDonalds"（此搜索关键字用于测试）。

map.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id='map'>
  </div>
    <ion-fab bottom right id="locate">
      <button ion-fab
      (click)="locationClick()" color="white"><ion-icon ios="ios-locate-outline" md ="md-locate" color="primary"></ion-icon></button>
    </ion-fab>
    <ion-fab top left id="compass-fab">
      <button ion-fab mini (click)="compassClick()" color="white" id="compass"></button>
    </ion-fab>
    <ion-fab top right id="layers">
      <button ion-fab mini id="layers-button" color="white"><ion-icon name="SMAPP-layers"></ion-icon></button>
      <ion-fab-list side="bottom">
        <button ion-fab mini (click)="trafficClick()" id="traffic" color="white"></button>
        <button ion-fab mini (click)="transitClick()" id="transit" color="white"></button>
        <button ion-fab mini (click)="bicycleClick()" id="bicycle" color="white"></button>
      </ion-fab-list>
    </ion-fab>
</ion-content>

map.ts:

   declare var google: any;
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class OfficeLocatorPage {
  @ViewChild(Navbar) navBar: Navbar;
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  mapOptions:any;
  infowindow: any;
  trafficEnabled = false;
  transitEnabled = false;
  bicycleEnabled = false;
  markers = [];
  trafficLayer = new google.maps.TrafficLayer();
  transitLayer = new google.maps.TransitLayer();
  bicycleLayer = new google.maps.BicyclingLayer();
  constructor(private navCtrl: NavController, private platform: Platform,
  private geolocation: Geolocation) {}

  ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
      this.navCtrl.pop({animate: true, animation: "transition", direction: "left", duration: 300});
    };
 }
  ionViewDidEnter() {
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }

  locationClick() {
    this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
    let myLocation = new google.maps.LatLng(resp.coords.latitude,resp.coords.longitude);
    this.map.setCenter(myLocation);
  });
}

  compassClick() {
    this.map.animateCamera({
      target: this.map.getCameraTarget(),
      tilt: 0,
      bearing: 0,
      duration: 1000
    });
  }

  trafficClick() {
    if (this.transitEnabled == true) {
      this.transitClick();
      this.trafficEnabled = true;
      this.trafficLayer.setMap(this.map);
    } else if (this.trafficEnabled == false) {
      this.trafficEnabled = true;
      this.trafficLayer.setMap(this.map);
    } else {
      this.trafficEnabled = false;
      this.trafficLayer.setMap(null);
    }
  }
  transitClick() {
    if (this.trafficEnabled == true) {
      this.trafficClick();
      this.transitEnabled = true;
      this.transitLayer.setMap(this.map);
    } else if (this.transitEnabled == false) {
      this.transitEnabled = true;
      this.transitLayer.setMap(this.map);
    } else {
      this.transitEnabled = false;
      this.transitLayer.setMap(null);
    }
  }
  bicycleClick() {
    this.bicycleEnabled = !this.bicycleEnabled;
    if (this.bicycleEnabled) {
      this.bicycleLayer.setMap(this.map);
    } else {
      this.bicycleLayer.setMap(null);
    }
  }


  loadMap() {
    this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
    let myLocation = new google.maps.LatLng(resp.coords.latitude,resp.coords.longitude);
    this.map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: myLocation,
      disableDefaultUI: true
    });
  });
  let watch = this.geolocation.watchPosition();
  watch.subscribe((data) => {
    this.deleteMarkers();
    let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);
    let image = {
      url: "assets/icon/blue_dot.png", // url
      scaledSize: new google.maps.Size(25, 33), // scaled size
      origin: new google.maps.Point(0,0), // origin
      anchor: new google.maps.Point(0, 0) // ancho
    };
    this.addMarker(updatelocation, image);
    this.setMapOnAll(this.map);
  });
    var request = {
      query: 'McDonalds',
      fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry'],
    };
    let service = new google.maps.places.PlacesService(this.map);
    service.findPlaceFromQuery(request, callback);
    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (let i = 0; i < results.length; i++) {
          let placeLoc = results[i].geometry.location;
          this.addMarker(placeLoc, 'red');
        }
      }
      this.setMapOnAll(this.map);
    }
  }

  addMarker(location, image) {
  let marker = new google.maps.Marker({
    position: location,
    map: this.map,
    icon: image
  });
  this.markers.push(marker);
}

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

clearMarkers() {
  this.setMapOnAll(null);
}

deleteMarkers() {
  this.clearMarkers();
  this.markers = [];
}
}

Answer 1

我会推荐你使用setMap(map);。有一个很好的例子，您将使用 from。我几个月前用过它，效果很好。希望对你有帮助。

Answer 2

我发现 places 库没有被正确访问，但现在可以，我还更新了代码以显示使用 places 函数 findPlaceByQuery() 收集信息需要做什么。 Google JavaScript API 文档在如何显示基于查询的搜索结果方面并不准确。这是有关如何执行此操作的更新代码，一旦您在要使用的脚本标记中正确设置了位置库（我还包含了有关如何正确显示标记的代码，scopeObj 是 class传递给 loadMap() 函数的对象：

map.ts:

  var request ={
        locationBias: this.myLocation,
        query: "McDonalds",
        fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry']
      };
      var callbackCount = 0;
      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (let i = 0; i < results.length; i++) {
            let placeLoc = results[i].geometry.location;
            scopeObj.addMarker(placeLoc, 'red');
          }
        }
        callbackCount++;
      };
      let service = new google.maps.places.PlacesService(this.map);
      service.findPlaceFromQuery(request, callback);
      continueExec();

      function continueExec() {
        if (callbackCount < 1) {
          setTimeout(continueExec, 1000);
          return;
        }
        scopeObj.setMapOnAll(this.map);
      }
  }

    addMarker(location, image) {
    let marker = new google.maps.Marker({
      position: location,
      map: this.map,
      icon: image
    });
    this.markers.push(marker);
  }

  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      var marker = new google.maps.Marker({
          position: this.markers[i].getPosition(),
          map: this.map,
          title: 'Hello World!'
        });
    }
  }

将要添加到 index.html 中的 API 脚本置于标签中所有其他脚本标签的上方：

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=....&libraries=places" type="text/javascript"></script>

使用 Google Places Library 通过 Google Maps 和 Ionic 显示预定关键字的所有位置标记

Use Google Places Library to show all location markers for a predetermined keyword with Google Maps and Ionic

google-maps

cordova

ionic-framework

google-places-api

google-places