[英]Google Maps API NativeScript custom marker icon
I try to create a marker with a custom icon with NativeScript and the Google maps API package.我尝试使用 NativeScript 和 Google 地图 API 包创建一个带有自定义图标的标记。 I added my icon to the android resources and then built my project a few times.
我将我的图标添加到 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);
Even when I try icon
or logo
for the ressource it doesn't appear.即使我尝试使用资源的
icon
或logo
,它也不会出现。
Using Angular2使用 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);
}
Using Vue this worked for me.使用 Vue 这对我有用。
Note 1: fromResource
and fromFile
have been deprecated and new functions are called fromFileSync
and fromResourceSync
注 1:
fromResource
和fromFile
已被弃用,新函数被称为fromFileSync
和fromResourceSync
Note 2 : Do not change marker color after setting the icon, this will show you the default icon although you would have set ImageSource for custom icon correctly注意 2 :设置图标后不要更改标记颜色,这将向您显示默认图标,尽管您已经为自定义图标正确设置了 ImageSource
1 ) import required NativeScript libraries 1 ) 导入所需的 NativeScript 库
import { Image } from "ui/image";
import { ImageSource } from "image-source";
import { Marker } from "nativescript-google-maps-sdk";
2 a) Add custom marker image using local path 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) Add custom marker image using resources (in Android for example these live in drawable folders in app/App_Resources/Android/src/main/res
, here the example image is icon.png
) 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;
In Nativescript version 7 i used the following code to make it work with local image file.在 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.