angular - 我怎样才能通过 lat,long 从外面创建一个传单标记角
问题描述
这是一个工作代码,用于使用传单角度为预定义的纬度、经度放置标记。
现在我想通过在按下 addmarker 按钮时传递 lat,long 来自定义它。任何人都可以建议吗?
经纬度信息在页面加载时不可用,只有在按下添加标记按钮时才需要传递。
import { Component, OnChanges } from "@angular/core";
import "leaflet/dist/leaflet.css";
import * as L from "leaflet";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
map;
markers: L.Layer[] = [];
markerIcon = {
icon: L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
// specify the path here
iconUrl: 'leaflet/marker-icon.png',
shadowUrl: 'leaflet/marker-shadow.png'
})
};
public options = {
layers: [
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 18,
attribution: ""
})
],
zoom: 10,
center: L.latLng(40.7128, 74.0060)
//center: L.latLng(this.lat, this.long);
};
getLatLong() {
this.lat = 40.7128;
this.long = 74.0060;
this.addMarker(this.lat, this.long);
}
addMarker(lat, long) {
const newMarker = L.marker([40.7128, 74.0060], this.markerIcon);
//const newMarker = L.marker([this.lat, this.long], this.markerIcon);
this.markers.push(newMarker);
newMarker.addTo(this.map);
}
onMapReady(map: L.Map) {
this.map = map;
// Do stuff with map
}
}
<div
style="height: 90vh;"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)"
></div>
<button (click)="addMarker()">
add marker
</button>
<button (click)="getLatLong()">
getLAtLong
</button>
解决方案
您将所需的坐标作为参数传递,addMarker()
如下所示:
<button (click)="addMarker(46.8523, -121.7603)">
add marker
</button>
您不需要 getLatLong 和另一个按钮
然后使用地图实例更改地图中心:
this.map.panTo(new L.LatLng(lat, lng));
推荐阅读
- python - 从 Pandas 列中的当前行值中减去前一行值
- javascript - 如何阻止机器人使用 .submit() 绕过我的“必填”字段?
- javascript - 单击带有所需输入的表单中的提交按钮后如何重定向到另一个页面
- html - 如何使使用 vue 创建的分页栏居中?
- outlook - 创建 Com 加载项显示在 Outlook 365 中的非活动应用程序加载项中
- javascript - 浏览器组件 (IE) 不显示 document.getElementbyId 的值
- python - 禁用 argparse 参数的正则表达式
- hikaricp - Hikari 中的连接测试查询
- python-3.x - 如何根据列表值 x 和 y 为 sin 函数设置动画?
- c - 如何在c编程中禁用覆盖功能