Google maps api 3 爱奥尼亚3中带有当前位置标记的谷歌地图

我正在构建一个应用程序，其中我想使用谷歌地图，我使用的是爱奥尼亚3.20.1版和科尔多瓦8.xx版

我想使用谷歌地图java脚本API，使我的地图看起来像大多数应用程序上的地图。 屏幕截图- 我想建造什么 我所能建造的

我的map.html文件看起来像

<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="addMarker()"><ion-icon name="add"></ion- 
icon>Add Marker</button>
    </ion-buttons>  
  </ion-navbar>
</ion-header>

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

地图
添加标记

我的map.ts文件是

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

declare var google;

@IonicPage()
@Component({
  selector: 'page-google-map',
  templateUrl: 'google-map.html',
})
export class GoogleMapPage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(public navCtrl: NavController, public navParams: 
NavParams,public geolocation: Geolocation) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad GoogleMapPage');
    this.loadMap();
  }

  loadMap(){

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

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

  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  this
}, (err) => {
  console.log(err);
});

  }
      addMarker(){

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

    let content = "<h4>Information!</h4>";          

    this.addInfoWindow(marker, content);

  }
      addInfoWindow(marker, content){

    let infoWindow = new google.maps.InfoWindow({
      content: content
    });

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

  }
 }

从'@angular/core'导入{Component，ViewChild，ElementRef}；
从“离子角度”导入{IonicPage，NavController，NavParams}；
从'@ionic native/Geolocation'导入{Geolocation}；
谷歌公司；
@IonicPage（）
@组成部分({
选择器：“页面谷歌地图”，
templateUrl:'google map.html'，
})
导出类GoogleMapPage{
@ViewChild（'map'）mapElement:ElementRef；
地图：任何；
构造函数（公共navCtrl:NavController，公共navParams:
导航参数，公共地理定位：地理定位）{
}
ionViewDidLoad（）{
log（'ionViewDidLoad GoogleMapPage'）；
这个.loadMap（）；
}
loadMap（）{
this.geolocation.getCurrentPosition（）。然后（（位置）=>{
让latLng=new google.maps.latLng（position.coords.latitude，position.coords.longitude）；
让mapOptions={
中心：拉特林，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
this.map=new google.maps.map（this.mapeElement.nativeElement，mapOptions）；
这
}，（错误）=>{
控制台日志（err）；
});
}
addMarker（）{
让marker=new google.maps.marker({
map:this.map，
动画：google.maps.animation.DROP，
位置：this.map.getCenter（）
});
让内容=“信息！”；
此.addInfo窗口（标记、内容）；
}
AddInfo窗口（标记、内容）{
让infoWindow=new google.maps.infoWindow({
内容：内容
});
google.maps.event.addListener（标记，'click'，（）=>{
infoWindow.open（this.map，marker）；
});
}
}

---

我非常需要显示当前位置的蓝点

查看复杂图标下的谷歌地图API参考：

可以使用一个蓝色圆点的SVG图标设置自定义标记。下面是一个来自以前的Ionic项目的示例，该项目需要用户位置的自定义图标。请注意，SVG不是整个文件，只是路径信息。我认为您还可以通过URL引用完整的SVG文件（请参阅参考资料）。在本例中，SVG路径不是点

var myLocationIcon = {
  path: 'M11 11l1.256 5 3.744-10-10 3.75 5 1.25zm1-11c-5.522 0-10 4.395-10 9.815 0 5.505 4.375 9.268 10 14.185 5.625-4.917 10-8.68 10-14.185 0-5.42-4.478-9.815-10-9.815zm0 18c-4.419 0-8-3.582-8-8s3.581-8 8-8 8 3.582 8 8-3.581 8-8 8z',
  scale: 1,
  fillColor: '#3a84df'
};

var marker = new google.maps.Marker({
  map: map,
  animation: google.maps.Animation.DROP,
  position: latlng,
  icon: myLocationIcon
});

---

请查看复杂图标下的谷歌地图API参考：

可以使用一个蓝色圆点的SVG图标设置自定义标记。下面是一个来自以前的Ionic项目的示例，该项目需要用户位置的自定义图标。请注意，SVG不是整个文件，只是路径信息。我认为您还可以通过URL引用完整的SVG文件（请参阅参考资料）。在本例中，SVG路径不是点

var myLocationIcon = {
  path: 'M11 11l1.256 5 3.744-10-10 3.75 5 1.25zm1-11c-5.522 0-10 4.395-10 9.815 0 5.505 4.375 9.268 10 14.185 5.625-4.917 10-8.68 10-14.185 0-5.42-4.478-9.815-10-9.815zm0 18c-4.419 0-8-3.582-8-8s3.581-8 8-8 8 3.582 8 8-3.581 8-8 8z',
  scale: 1,
  fillColor: '#3a84df'
};

var marker = new google.maps.Marker({
  map: map,
  animation: google.maps.Animation.DROP,
  position: latlng,
  icon: myLocationIcon
});