gpt4 book ai didi

google-maps - 单击多段线 ID

转载 作者:行者123 更新时间:2023-12-05 07:50:24 32 4
gpt4 key购买 nike

我使用的是 Google map v3,并且在我的页面上放置了一张 map 。用户从一些列表中选择一堆数据,然后我的 map 使用我的数据库中的数据进行更新,并为用户提供带有所选数据折线的 map 。使用 jquery 从数据库中检索数据并以 json 格式返回。我的代码解析 json 并绘制折线。我的 json 包含一个数据 ID、lat、lng。工作良好。

现在我希望用户能够单击其中一个折线点,我将从我的数据库中获取该数据 ID 的附加数据,但我无法确定他们单击的是哪个 ID。有没有人有快速的解决方案来识别线上点击了哪个 id?

这是我的多段线点击事件监听器。它可以让它做出很好的 react ,但我不知道如何识别“什么”点被点击了,这样我就可以去获取我的额外数据。下面的示例为我提供了多段线中第一个元素的 ID,因此我知道我正在访问数组并且事件正在触发。只需要能够定位到我点击的具体点即可。我得到了我的 json。我的测试集有 8,349 个点,看起来像这样。

{
"id": 1590065,
"lat": 37.07318,
"lng": -88.563132}
,{
"id": 1590066,
"lat": 37.07307,
"lng": -88.563002}
,{
"id": 1590067,
"lat": 37.072967,
"lng": -88.562875}
,{
"id": 1590068,
"lat": 37.07287,
"lng": -88.56275}
,{
"id": 1590069,
"lat": 37.072779,
"lng": -88.56263}
,....

然后我解析数据并将其分配给我的坐标。

vesselPathCoordinates = JSON.parse("[" + data + "]");

然后我构建我的折线。

vesselPath = new google.maps.Polyline({
path: vesselPathCoordinates,
strokeColor: ''#FF0000'',
strokeOpacity: 1.0,
strokeWeight: 1.5
});



google.maps.event.addListener(vesselPath, 'click', function( event ){
console.log( vesselPathCoordinates[0].id );
});

当用户单击线上的特定点时,我想知道他们单击的 JSON 中的 ID。换句话说,线上的纬度和经度点触发了事件。

最佳答案

您可以在直线中找到最接近点击点的点,在输入数据中查找该顶点的 id 并将其返回。

google.maps.event.addListener(vesselPath, 'click', function( event ){
console.log(event);
var minDist = Number.MAX_VALUE;
for (var i=0; i<this.getPath().getLength(); i++){
var distance = google.maps.geometry.spherical.computeDistanceBetween(event.latLng, this.getPath().getAt(i));
if (distance < minDist) {
minDist = distance;
index = i;
}
}
infowindow.setContent("id="+vesselPathCoordinates[index].id);
infowindow.setPosition(this.getPath().getAt(index));
infowindow.open(map);
console.log( vesselPathCoordinates[0].id );
});

代码片段:

function initialize() {
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
vesselPath = new google.maps.Polyline({
path: vesselPathCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 1.5,
map: map
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < vesselPath.getPath().getLength(); i++) {
bounds.extend(vesselPath.getPath().getAt(i));
}
map.fitBounds(bounds);
google.maps.event.addListener(vesselPath, 'click', function(event) {
console.log(event);
var minDist = Number.MAX_VALUE;
for (var i = 0; i < this.getPath().getLength(); i++) {
var distance = google.maps.geometry.spherical.computeDistanceBetween(event.latLng, this.getPath().getAt(i));
if (distance < minDist) {
minDist = distance;
index = i;
}
}
infowindow.setContent("id=" + vesselPathCoordinates[index].id);
infowindow.setPosition(this.getPath().getAt(index));
infowindow.open(map);
console.log(vesselPathCoordinates[index].id);
});
}
google.maps.event.addDomListener(window, "load", initialize);

var vesselPathCoordinates = [{
"id": 1590065,
"lat": 37.07318,
"lng": -88.563132
}, {
"id": 1590066,
"lat": 37.07307,
"lng": -88.563002
}, {
"id": 1590067,
"lat": 37.072967,
"lng": -88.562875
}, {
"id": 1590068,
"lat": 37.07287,
"lng": -88.56275
}, {
"id": 1590069,
"lat": 37.072779,
"lng": -88.56263
}]
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>

关于google-maps - 单击多段线 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36224498/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com