ionic4 - 在 ionic4 项目的谷歌地图中添加多个位置标记

Question

我正在从事一个 Ionic 项目，该项目的要求是在具有多个标记的 ionic 页面中添加谷歌地图。我遵循了一些 youtube 教程，并成功地添加了带有一个位置标记的谷歌地图。我想添加多个具有不同纬度和经度值的位置标记。

下面是我试过的代码。

HTML:

<ion-content>
<div #mapElement class="map"></div>
</ion-content>

TS:

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 declare var google;

 @Component({
 selector: 'app-test',
 templateUrl: './test.page.html',
styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {
 @ViewChild('mapElement', {static:true}) mapRef: ElementRef;
 constructor() { }

  ngOnInit() {
  }

   ngAfterViewInit() {
  const location = new google.maps.LatLng(17.385044,
  78.486671);

    const options = {
   center:location,
   zoom:10,
   streetViewControl:false,
   mapTypeId:'hybrid'
   };

  const map = new google.maps.Map(this.mapRef.nativeElement,options);
   this.addMarker(location,map);
 }

  addMarker(position,map) {
  return new google.maps.Marker({
    position,
    map
   });
 }

}

请帮助我如何为类加罗尔、钦奈、孟买位置添加具有纬度和经度值的不同标记。

谢谢。

Answer 1

正如所建议的那样，最好的办法是让 ionic 原生组件工作，因为它是角度/ ionic 感知的，并且会避免问题，就像您已经尝试获取

不过，根据您尝试的方式，您首先需要确定的是

1. 添加了代码段以包含脚本
2. 为自己设置正确的 key

添加片段

查看index.html，你应该把它放在</body> 结束之前

<!--Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

取自these docs .

获取 API key

Google map 目前仅部分免费。您每月可以获得大约 300 美元的使用费，但是:

• 您必须有一个 API key ，
• 您的帐户必须有信用卡/结算方式，
• 并且您应该限制 API key 只能用于您的网站/应用程序，这样其他人就无法获取您的 API key 并在他们自己的网站上使用它

这都详细解释了in these docs .

添加多个标记

制作一些位置:

const locations: any[] = [];
locations.push(new google.maps.LatLng(17.385044, 78.486671));
locations.push(new google.maps.LatLng(17.384412, 78.486671));
locations.push(new google.maps.LatLng(16.312344, 78.486671));
locations.push(new google.maps.LatLng(18.385010, 78.486671));

循环位置并添加它们:

for(let i = 0; i < locations.length; i++) {
  this.addMarker(locations[i],map);
}

还有问题吗？

那你需要把具体错误是什么解释的更清楚些。

只是含糊地说它行不通，让我们花时间从一百万件事情中猜测什么可能是错的，这是不尊重的。

人们很乐意提供帮助，但您必须让他们轻松一些。