个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
29
4
Google map 网络应用程序以非常漂亮的方式对区域区域进行地理编码和勾勒。这可以通过 Google Maps JavaScript API 实现吗？网站示例:
这是瑞典的斯科讷县。 Google Maps Web 应用程序用红色勾勒出它的轮廓，并用粉红色阴影表示它。我想使用 Google Maps JavaScript API 像这样对区域进行地理编码和显示。怎么办？
最佳答案
据我所知，Google Map API v3 尚未提供边界功能。
您需要知道边界才能塑造多边形。给定地址的地理编码器返回的信息不足以形成边界。您可能会看到返回的信息 here .
The Stockholm boundaries are: '17.73966,59.66395|17.75651,59.61827|17.81771,59.58645|17.84347,59.53069|17.78465,59.49340|17.78277,59.38916|17.83277,59.36500|17.93215,59.33652|18.00736,59.34496|18.09139, 59.33444|18.05722,59.39139|18.12000,59.45388|18.19508,59.45012|18.16562,59.41083|18.32826,59.39795|18.28659,59.41228|18.25945,59.44638|18.31722,59.47361|18.37333,59.46694|18.66638,59.59138|18.69979,59.64409|18.74555,59.68916| 18.84139,59.71249|18.98569,59.71666|19.03222,59.71999|19.07965,59.76743|18.93472,59.78361|18.86472,59.79804|18.96922,59.86561|19.06545,59.83250|19.07056,59.88972|19.00722,59.91277|18.92972,59.92472|18.89000,59.95805|18.81722, 60.07548|18.77666,60.11084|18.71139,60.12806|18.63277,60.14500|18.50743,60.15265|18.44805,59.99249|18.37334,59.86500|18.29055,59.83527|18.15472,59.79556|18.08111,59.74014|17.96055,59.70472|17.89694,59.68916|17.73966,59.66395'
总而言之，困难的部分是找到要在 map 上绘制的城市的边界。我不确定是否有提供这些界限的免费服务。检查这个Stackoverflow question获取有关提供边界的网站的更多信息。
在下面的示例中，当您单击“绘制斯德哥尔摩”按钮时，斯德哥尔摩就会绘制在 map 上。
<html>
<head>
<head>
<title>Area calculator - Outline a property on a google map and find its area</title>
<title>Google Maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en">
</script>
<script type="text/javascript">
var map,
geocoder,
addressMarker,
mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
}
function showAddress() {
var address = $('#to').val();
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function drawPolygon() {
// stockholm boundaries
var boundaries = '17.73966,59.66395|17.75651,59.61827|17.81771,59.58645|17.84347,59.53069|17.78465,59.49340|17.78277,59.38916|17.83277,59.36500|17.93215,59.33652|18.00736,59.34496|18.09139,59.33444|18.05722,59.39139|18.12000,59.45388|18.19508,59.45012|18.16562,59.41083|18.32826,59.39795|18.28659,59.41228|18.25945,59.44638|18.31722,59.47361|18.37333,59.46694|18.66638,59.59138|18.69979,59.64409|18.74555,59.68916|18.84139,59.71249|18.98569,59.71666|19.03222,59.71999|19.07965,59.76743|18.93472,59.78361|18.86472,59.79804|18.96922,59.86561|19.06545,59.83250|19.07056,59.88972|19.00722,59.91277|18.92972,59.92472|18.89000,59.95805|18.81722,60.07548|18.77666,60.11084|18.71139,60.12806|18.63277,60.14500|18.50743,60.15265|18.44805,59.99249|18.37334,59.86500|18.29055,59.83527|18.15472,59.79556|18.08111,59.74014|17.96055,59.70472|17.89694,59.68916|17.73966,59.66395';
var latLngArray = boundaries.split('|');
var points = [];
for (var i = 0; i < latLngArray.length; i++) {
pos = latLngArray[i].split(',');
points.push(new google.maps.LatLng(parseFloat(pos[1]), parseFloat(pos[0])));
}
var shape = new google.maps.Polygon({
paths: points,
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.35
});
shape.setMap(map);
}
$(document).ready(function () {
initialize();
});
$(document).on('click', '.show-address', function (e) {
e.preventDefault();
showAddress();
});
$(document).on('click', '.draw-address', function (e) {
e.preventDefault();
drawPolygon();
});
</script>
</head>
<body>
<div id="basic-map">
<div id="map_canvas" style="height:150px;"></div>
<label for="to">Address</label>
<input type="text" id="to" value="Stockholm, Sweden" />
<a href="#" class="show-address">Show Address</a>
<a href="#" class="draw-address">Draw Stockholm</a>
</div>
</body>
</html>希望对您有所帮助。
关于javascript - 使用 Google Maps JavaScript API 绘制区域轮廓和阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15184584/
29
4
0
我学习 SDL 二维编程已有一段时间了，现在我想创建一个结合使用 SDL 和 OpenGL 的程序。我是这样设置的: SDL_Init(SDL_INIT_VIDEO); window = SDL_Cr
尝试查找可在地块中使用的不同类型项目的列表 来自不同样本的投影类型: projection = list(type = "equirectangular") projection = list(typ
我正在尝试使用 Java Graphics API 绘制 GIF，但无法使用下面的代码成功绘制 GIF。仅绘制 GIF 的第一张图像或缩略图，但不播放。 public void paintCompon
我目前正在使用 JFrame 并尝试绘制一个矩形，但我不知道如何执行代码 paint(Graphics g)，如何获取 Graphics 对象？ package com.raggaer.frame;
这个领域的新手，希望得到一些帮助。 我有一个"Missile.java" 类，我在那里画东西。我想绘制一个 ImageView，我正在使用以下代码: ImageView v = (ImageView)
下面列出了圆形的例子 这是我的 JavaScript 代码。 最佳答案 假设您的 randomColor 是正确的，您只需要: 从 canvas.onclick 中移除 context.clearR
我在绘制和缩放 ImageView 时遇到问题。请帮帮我.. 当我画一些东西然后拖动或缩放图像时 - 绘图保留在原处，如您在屏幕截图中所见。而且我只需要简单地在图片上绘图，并且可以缩放和拖动这张图片。
我们可以在形式之外绘制图像和文本...我的意思是在字面上... 我知道问这个问题很愚蠢但是我们能不能... 最佳答案 您可以通过创建表单并将其 TransparentColor 属性设置为背景色来“作
我在绘制/布局期间收到 3 个对象分配警告 super.onDraw(canvas); canvas.drawColor(Color.WHITE); Paint textPaint = new Pai
我有一个示例时间序列数据框: df = pd.DataFrame({'year':'1990','1991','1992','1993','1994','1995','1996',
我试图想出一种简洁的方法来绘制 R 数据框中所有列的 GridView 。问题是我的数据框中既有离散值又有数值。为简单起见，我们可以使用 R 提供的名为 iris 的示例数据集。我会使用 par(mf
我有一个由 10 列和 50 行组成的 data.frame。我使用 apply 函数逐列计算密度函数。现在我想绘制我一次计算的密度。 换句话说，而不是绘图... plot(den[[1]]) plo
我想知道我们如何才能在第一个和第二个组件之外绘制个人，如下所示: 最佳答案 这可能有效: pc.cr <- princomp(USArrests, cor = TRUE) pairs(pc.cr$lo
我是Pandas和matplotlib的新手，想绘制此DataFrame season won team matches pct_won 0 20
我正在尝试为 distplot 子图编写一个 for 循环。 我有一个包含许多不同长度列的数据框。 (不包括 NaN 值) fig = make_subplots( rows=len(asse
我想创建一个具有密度的 3d 图。 我使用函数 density 首先为特定的 x 值创建一个二维图，然后该函数创建密度并将它们放入 y 变量中。现在我有第二组 x 值并将其再次放入密度函数中，然后我得
全部， 我一直在研究全局所有 MTB 步道的索引。我是 Python 人，所以对于所有涉及的步骤，我都尝试使用 Python 模块。 我能够像这样从 OSM 立交桥 API 中获取关系: from O
我正在使用 e1071 包中的支持向量机对我的数据进行分类，并希望可视化机器实际如何进行分类。但是，在使用 plot.svm 函数时，出现无法解决的错误。 脚本: library("e1071") d
我制作了以下图表，它是使用 xts 对象创建的。 我使用的代码很简单 plot(graphTS1$CCLL, type = "l", las = 2, ylab = "(c)\nCC for I
在绘制状态图时，您如何知道哪些状态放在框中，哪些状态用于转换箭头？我注意到转换也是状态。 我正在查看 this page 上的图 1 : 最佳答案 转换不是状态。转换是将对象从一种状态移动到下一种状态
我是一名优秀的程序员,十分优秀！