如何在谷歌地图上绘制直线 [英] how to plot straight line on google map
本文介绍了如何在谷歌地图上绘制直线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，我已经编写了以下代码以在Google地图上绘制2个点.现在，我想使用直线连接它们.请帮忙.
我的代码:
hi all, i have written the following code to plot 2 points on a google map. now, i want to connect them using a straight line. pl help.
my code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA3VhlbU84rXxxNJIwhgnCZBSuP9ZqWvsczlCo05gzZUKk3SVL5BQDjOk8Uo9hfXvOcey1b2DBrQ_rUA"
type="text/javascript">
</script>
<script type="text/javascript">
function disp()
{
var lat1 = document.getElementById("txtlat1").value;
var lat2 = document.getElementById("txtlat2").value;
var lng1 = document.getElementById("txtlng1").value;
var lng2 = document.getElementById("txtlng2").value;
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
// 'map' is the name of the 'div' defined inside <body>.
map.setCenter(new GLatLng(lat1, lng1), 15);
map.setUIToDefault();
var marker1 = new GMarker(new GLatLng(lat1, lng1));
map.addOverlay(marker1);
var marker2 = new GMarker(new GLatLng(lat2, lng2));
map.addOverlay(marker2);
}
}
</script>
</head>
<body>
<div id="map" style="width: 500px; height: 300px"></div>
<form id="form1" runat="server">
<div>
<br />
<asp:Label ID="lbllat1" runat="server" Text="Enter the 1st latitude value:" Width="168px"> <asp:TextBox
ID="txtlat1" runat="server">
<asp:Label ID="lbllng1" runat="server" Text="Enter the 1st longitude value:" Width="180px">
<asp:TextBox ID="txtlng1" runat="server"><br />
<br />
<asp:Label ID="lbllat2" runat="server" Text="Enter the 2nd latitude value:" ToolTip=" " Width="169px">
<asp:TextBox ID="txtlat2" runat="server">
<asp:Label ID="lbllng2" runat="server" Text="Enter the 2nd longitude value:" Width="181px">
<asp:TextBox
ID="txtlng2" runat="server"><br />
<br />
<input id="btnSubmit" type="button" value="Submit" onclick="disp();"/>
</div>
</form>
</body>
</html>
推荐答案
看看Google Maps API文档.这是关于绘制线条的部分.
但这应该可行:
Take a look at the Google Maps API documentation. Here is the section on drawing lines.
But this should work:
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(lat1, lng1), 15);
var polyOptions = {geodesic:true};
var polyline = new GPolyline([
new GLatLng(lat1, lng1),
new GLatLng(lat2, lng2)
], "#ff0000", 10, 1, polyOptions);
map.addOverlay(polyline);
map.setUIToDefault();
var marker1 = new GMarker(new GLatLng(lat1, lng1));
map.addOverlay(marker1);
var marker2 = new GMarker(new GLatLng(lat2, lng2));
map.addOverlay(marker2);
}
另外，请考虑升级代码并使用Maps API的版本 3版
Also, consider upgrading your code and using version 3 of the Maps API
这篇关于如何在谷歌地图上绘制直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
