Javascript 谷歌地图API NativeScript自定义标记图标_Javascript_Android_Google Maps_Nativescript

Javascript 谷歌地图API NativeScript自定义标记图标

javascript android google-maps nativescript

Javascript 谷歌地图API NativeScript自定义标记图标,javascript,android,google-maps,nativescript,Javascript,Android,Google Maps,Nativescript,我尝试使用NativeScript和Google maps API包创建一个带有自定义图标的标记。我将我的图标添加到android资源中，然后多次构建我的项目 var marker = new mapsModule.Marker(); marker.position = mapsModule.Position.positionFromLatLng(result.latitude, result.longitude); marker.title = "Home"; var

我尝试使用NativeScript和Google maps 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);

即使我尝试为ressource设置

图标

或

徽标

，它也不会出现。

使用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);
    }

使用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);
    }

使用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\u resources/Android/src/main/res

中的可绘制文件夹中的这些图像，这里的示例图像是

icon.png

）