Question

我尝试使用NativeScript和Google maps API包创建带有自定义图标的标记。我将我的图标添加到了android资源中，然后几次构建了我的项目。

np.hstack

即使我尝试使用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作为资源，它也不会出现。

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;

OR

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;

Google Maps API NativeScript自定义标记图标

3 个答案: