Google 地图 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 版本 6 中，我使用以下代码使其与本地图像文件一起工作。

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;

Google 地图 API NativeScript 自定义标记图标

Google Maps API NativeScript custom marker icon

javascript

android

google-maps

nativescript