- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我希望检测到标记并显示分配给矩形的值。通过研究,我发现this , 但它不适用于我的情况,因为我只需要一个 latlong 点。我找到了与我想要的类似的东西并尝试了一下,它是 here
但它似乎对我的情况不起作用。我在下面有一个矩形:
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: -37.822802,
south: -37.822260,
east: 145.036010,
west: 145.035324
}
});
然后我尝试插入一个点,它是 -37.822545, 145.035526,这个点在矩形内,它应该返回 true 但事实并非如此。 Here is my JSfiddle
最佳答案
看起来像 LatLngLiteralBounds
google.maps.Rectangle
的输入被打破。它创建一个南北颠倒的矩形。使用您的原始矩形(北:-37.822802,南:-37.822260
),我得到:
NE1:-37.822802,145.03601 (north=-37.822802, incorrect)
SW1:-37.82226,145.035324 (south=-37.82226, incorrect)
而如果我用 google.maps.LatLngBounds
创建矩形对象,我得到:
NE2:-37.82226,145.03601 (north=-37.82226, correct)
SW2:-37.822802,145.035324 (south=-37.822802, correct)
(蓝色标记是 rectangle2
的 NE/SW,红色标记是 rectangle1
的 NE/SW。)
有人应该在 issue tracker 中创建问题
代码片段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 19,
center: {
lat: -37.82280243352756,
lng: 145.0353240966797
},
mapTypeId: 'terrain'
});
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: -37.822802,
south: -37.822260,
east: 145.036010,
west: 145.035324
}
});
var rectangle2 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(-37.822802, 145.035324), // SW
new google.maps.LatLng(-37.822260, 145.036010)) // NE
});
var marker = new google.maps.Marker({
map: map,
position: {
lat: -37.822545,
lng: 145.035526
},
title: "-37.822545, 145.035526"
});
var NEmark1 = new google.maps.Marker({
map: map,
position: rectangle1.getBounds().getNorthEast(),
title: "NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue()
});
var SWmark1 = new google.maps.Marker({
map: map,
position: rectangle1.getBounds().getSouthWest(),
title: "SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue()
});
var NEmark2 = new google.maps.Marker({
map: map,
position: rectangle2.getBounds().getNorthEast(),
title: "NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue(),
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
var SWmark2 = new google.maps.Marker({
map: map,
position: rectangle2.getBounds().getSouthWest(),
title: "SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue(),
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
map.fitBounds(rectangle1.getBounds());
console.log(rectangle1.getBounds().toUrlValue());
console.log("NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue());
console.log("SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue());
document.getElementById('contains').innerHTML = "rectangle1 bounds.contains=" + rectangle1.getBounds().contains({
lat: -37.822545,
lng: 145.035526
});
console.log(marker.getPosition().toUrlValue());
console.log(rectangle2.getBounds().toUrlValue());
console.log("NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue());
console.log("SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue());
console.log(rectangle2.getBounds().contains({
lat: -37.822545,
lng: 145.035526
}));
document.getElementById('contains').innerHTML += " rectangle2 bounds.contains=" + rectangle2.getBounds().contains({
lat: -37.822545,
lng: 145.035526
});
console.log(rectangle2.getBounds().contains(marker.getPosition()));
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
height: 95%;
width: 100%;
}
<div id="contains"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
关于javascript - getBounds().contains 返回 false,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50329595/
在阅读关于多边形的 Java 文档时,我发现有一个 getBounds方法和 getBounds2D方法。注意到第一个不如第二个准确。 我想知道“不太准确”到底是什么意思?是否getBounds返回一
我正在尝试让 getBounds() 工作。 当我有这个代码时: google.maps.event.addListener(map, 'bounds_changed', createMarkerBu
编辑:我的问题实际上与此重复: google maps v3: center of bounds is different from center of the map 我尝试提取谷歌地图边界的中心点
我从 geoJson 中提取了一个要素图层,然后同步了一个表格。当我放大每个功能时,我试图做到这一点,它将表格过滤到这些功能。以下是我的脚本不起作用。我在 'if (map.getBounds().c
我有一个带有 JPanel 的简单应用程序和一个计时器,用于打印每一帧面板的大小和位置。 import java.awt.Point; import java.awt.Rectangle; impor
我正在尝试获取动态添加到 map 的标记的边界。我的目标是动态地将标记添加到 map 中,并使 View 自动缩放以适合 map 上所有标记的边界。以下是我当前的代码以及我迄今为止尝试过的内容: 起点
我有这段javascript代码 var myOptions = { zoom:9, mapTypeId: google.maps.MapTypeId.ROAD
photo = (ImageView) findViewById(R.id.image1); photo.setImageBitmap(pic); Drawable draw
我在这里关注答案:How get a string width in Libgdx? 我遇到的问题是 getBounds 似乎没有返回正确的宽度。我下面的代码应该在字符串末尾放置点,但是您可以看到一些
var map; function initialize(location) { var currentPosition = new google.maps.LatLng(14.457264, 121
我试过map.fitBounds(geojsonFeature.getBounds());我得到这个错误: geojsonFeature.getBounds() is not a function.
下面是我的代码。我已添加 google.maps.event.addListenerOnce 但仍然收到此错误。不知道如何解决。谢谢。 “未捕获类型错误:无法读取未定义的属性“getBounds””
我是Flash和ActionScript的新手,但管理起来很好。阻碍我前进的一件事是width的height和DisplayObject(Container)属性。我终于开始了解他们,并了解到Spri
我有一个从 JFrame 扩展的类。在其构造函数中,我生成一个 JPanel: JPanel contentPane = new JPanel(); contentPane.setBa
我希望检测到标记并显示分配给矩形的值。通过研究,我发现this , 但它不适用于我的情况,因为我只需要一个 latlong 点。我找到了与我想要的类似的东西并尝试了一下,它是 here 但它似乎对我的
而不是整个窗口都带有关闭、最大化和最小化按钮以及边框? 我正在尝试保存客户区的屏幕截图...maximizedBounds 使应用程序崩溃... 最佳答案 改为获取内容 Pane 的边界(即 JFra
我有: const map = L.map("mapid", {preferCanvas: true}); //.... const circle = L.circle([47.6652642,
EDIT2:似乎创建大数字是因为动画片段不包含任何 bipmap 数据,但我还不确定,但我真正的错误是我只是忘记了一个“getBounds”前面的“this”...项目规模太大,我找不到错误 =) 编
我想以 4 个 float 的列表形式获取 map 边界的坐标(即纬度/经度坐标中的两个点)。 这个(Google map 未记录的功能)直到几天前还可以工作: var b = map.getBoun
我正在尝试使用 STArray 编写 Fisher-Yates 洗牌算法。与我在网上找到的所有其他示例不同,我试图避免使用 native 列表。我只想就地洗牌数组。 这就是我所拥有的: randShu
我是一名优秀的程序员,十分优秀!