如何在谷歌地图上绘制直线

问题描述：

大家好，我已经编写了以下代码以在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(&quot;map&quot;));
    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

如何在谷歌地图上绘制直线

相关推荐