1
我已經搜索了幾個小時的網絡，並且似乎無法找到問題以我的看似簡單的問題。將多個自定義標記與Ionic 2 + Google Maps集成
簡而言之， 財產似乎並沒有做任何事情，當我ionic serve應用程序，儘管一切工作正常。
換句話說，Ionic 2使用Google Maps JavaScript API來定義自定義標記的圖標圖像是什麼？
我會在這裏提供我所有的相關代碼，但我有一種感覺，它可能不會對這樣的問題很有幫助。 憑藉我對Ionic 2的瞭解，我可以將Google地圖，在線/離線狀態以及一些默認標記集成到我的應用的頁面中。
順便說一句，我的測試圖像文件位於與google-maps.ts相同的文件夾中（只是現在就這樣做，因爲我知道發生了什麼）。
初始化Google地圖和創建addMarker函數的所有代碼都位於這一個文件中（這段代碼放在這裏以防萬一，下面的代碼跳到下一個代碼段查看最相關的部分它）：
的src /供應商/谷歌maps.ts
import { Injectable } from '@angular/core';
import { Connectivity } from './connectivity';
import { Geolocation } from 'ionic-native';
/*
Generated class for the GoogleMaps provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
declare var google;
@Injectable()
export class GoogleMaps {
mapElement: any;
pleaseConnect: any;
map: any;
mapInitialised: boolean = false;
mapLoaded: any;
mapLoadedObserver: any;
markers: any = [];
apiKey: string;
styles: any;
constructor(public connectivityService: Connectivity) {
}
init(mapElement: any, pleaseConnect: any): Promise<any> {
this.mapElement = mapElement;
this.pleaseConnect = pleaseConnect;
return this.loadGoogleMaps();
}
loadGoogleMaps(): Promise<any> {
return new Promise((resolve) => {
if(typeof google == "undefined" || typeof google.maps == "undefined") {
console.log("Google maps Javascript needs to be loaded");
this.disableMap();
if(this.connectivityService.isOnline()) {
window['mapInit'] =() => {
this.initMap().then(() => {
resolve(true);
});
this.enableMap();
}
let script = document.createElement("script");
script.id = "googleMaps";
if(this.apiKey) {
script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey
+ '&callback=mapInit';
} else {
script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
}
document.body.appendChild(script);
}
}
else {
if(this.connectivityService.isOnline()) {
this.initMap();
this.enableMap();
} else {
this.disableMap();
}
}
this.addConnectivityListeners();
})
}
initMap(): Promise<any> {
this.mapInitialised = true;
return new Promise((resolve) => {
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, -Doesn't seem necessary anymore
styles: [
{
"featureType": "poi.business",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
}
]
}
this.map = new google.maps.Map(this.mapElement, mapOptions);
resolve(true);
});
});
}
disableMap(): void {
if(this.pleaseConnect) {
this.pleaseConnect.style.display = "block";
}
}
enableMap(): void {
if(this.pleaseConnect) {
this.pleaseConnect.style.display = "none";
}
}
addConnectivityListeners(): void {
document.addEventListener('online',() => {
console.log("online");
setTimeout(() => {
if(typeof google == "undefined" || typeof google.maps == "undefined") {
this.loadGoogleMaps();
}
else {
if(!this.mapInitialised) {
this.initMap();
}
this.enableMap();
}
},2000);
}, false);
}
//Setting up custom Google Maps markers
//iconBase: any = 'https://maps.google.com/mapfiles/kml/shapes/'; -Probably not necessary
icons: any = {
partner: {
icon: 'partner.png'
},
boughtFrom: {
icon: 'boughtFrom.png'
}
}
addMarker(lat: number, lng: number, feature: any): void {
let latLng = new google.maps.LatLng(lat, lng);
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: latLng,
icon: this.icons[feature].icon
});
this.markers.push(marker);
}
}
的部分不工作對我來說是在最後的 「addMarker（）」 函數的 「圖標」 分配：
addMarker(lat: number, lng: number, feature: any): void {
let latLng = new google.maps.LatLng(lat, lng);
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: latLng,
icon: this.icons[feature].icon //Doesn't do anything
});
this.markers.push(marker);
}
目前我正在嘗試爲不同位置調用不同類型的標記，但即使我僅僅用partners.png或{ url: 'partners.img' }替換它，它仍然不會識別任何東西。
在這種情況下的問題，這些也都是我使用中出現的默認樣式地圖上的兩個測試標記：
的src /資產/數據/ locations.json
{
"locations": [
{
"latitude": 40.79567309999999,
"longitude": -73.97358559999998,
"type": "partner"
},
{
"latitude": 40.8107211,
"longitude": -73.95413259999998,
"type": "boughtFrom"
}
]
}
我還將包括地圖頁面，集成了所有這些信息：
的src /頁/ home.ts
import { Component, ElementRef, ViewChild } from '@angular/core';
import { Locations } from '../../providers/locations';
import { GoogleMaps } from '../../providers/google-maps';
import { NavController, Platform } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('map') mapElement: ElementRef;
@ViewChild('pleaseConnect') pleaseConnect: ElementRef;
constructor(public navCtrl: NavController, public maps: GoogleMaps,
public Platform: Platform, public locations: Locations) {
}
ionViewDidLoad() {
this.Platform.ready().then(() => {
let mapLoaded = this.maps.init(this.mapElement.nativeElement, this.pleaseConnect.nativeElement);
let locationsLoaded = this.locations.load();
Promise.all([
mapLoaded,
locationsLoaded
]).then((result) => {
let locations = result[1];
for(let location of locations) {
this.maps.addMarker(location.latitude, location.longitude, location.type);
}
})
});
}
}
謝謝你的時間！
任何和所有的幫助表示讚賞。
哇，我真是太傻了，我以爲我試過了，但好像我真的只是在語法錯誤最後一次輸入。 現在效果很好:)非常感謝你錯誤！ – TheKomrad