Google Maps API NativeScript 自定義標記圖標

Question

我嘗試使用 NativeScript 和 Google 地圖 API 包創建一個帶有自定義圖標的標記。 我將我的圖標添加到 android 資源中，然后構建了我的項目幾次。

   var marker = new mapsModule.Marker();
   marker.position = mapsModule.Position.positionFromLatLng(result.latitude, result.longitude);
   marker.title = "Home";
   var icon = new Image();
   icon.imageSource = imageSource.fromResource('bot_marker');
   marker.icon = icon;
   marker.snippet = "This is where I live";
   marker.userData = { index: 1 };
   mapView.addMarker(marker);

即使我嘗試使用資源的icon或logo ，它也不會出現。

Answer 1

使用 Angular2

import { Image } from "ui/image";
import { ImageSource } from "image-source";

    onMapReady(event) {
        console.log("Google map is ready!");

        var mapView = event.object;
        var marker = new Marker();
        marker.position = Position.positionFromLatLng(this.state.latitude, this.state.longitude);

        let imgSrc = new ImageSource();
        imgSrc.fromResource("pink_pin_dot");

        let image = new Image();
        image.imageSource = imgSrc;

        marker.icon = image;
        mapView.addMarker(marker);
    }

Answer 2

使用 Vue 這對我有用。

注 1： fromResource和fromFile已被棄用，新函數被稱為fromFileSync和fromResourceSync

注意 2 ：設置圖標后不要更改標記顏色，這將向您顯示默認圖標，盡管您已經為自定義圖標正確設置了 ImageSource

1 ) 導入所需的 NativeScript 庫

import { Image } from "ui/image";
import { ImageSource } from "image-source";
import { Marker } from "nativescript-google-maps-sdk";

2 a) 使用本地路徑添加自定義標記圖像

 const marker = new Marker()
 const imageSource = ImageSource.fromFileSync( "~/assets/images/icons/icon.png");
 const icon = new Image();
 icon.imageSource = imageSource;
 marker.icon = icon;

或

2 b) 使用資源添加自定義標記圖像（例如在 Android 中，這些位於app/App_Resources/Android/src/main/res中的可繪制文件夾中，這里的示例圖像是icon.png ）

 const marker = new Marker()
 const imageSource = ImageSource.fromResourceSync("icon");
 const icon = new Image();
 icon.imageSource = imageSource;
 marker.icon = icon;

Answer 3

在 Nativescript 版本 7 中，我使用以下代碼使其與本地圖像文件一起使用。

import {ImageSource} from "tns-core-modules/image-source";
import { Image } from "tns-core-modules/ui/image";
import {Folder, path, knownFolders} from "tns-core-modules/file-system"; 

/** Then in the point of adding the marker **/
const folder: Folder = <Folder>knownFolders.currentApp();
const folderPath: string = path.join(folder.path, "images/marker-blue.png");
const imageFromLocalFile: ImageSource = ImageSource.fromFileSync(folderPath);
let image = new Image();
image.imageSource = imageFromLocalFile;
marker.icon = image;