使用jQuery在谷歌地图上的两点之间画一条线？

Posted 2023-02-23

【中文标题】使用jQuery在谷歌地图上的两点之间画一条线？

【英文标题】：Draw a line between two point on a Google map using jQuery?

【发布时间】：2012-11-06 04:26:53

【问题描述】：

如何使用 jQuery 或 javascript 使用 Google 地图 API 在两点（纬度和经度）之间画一条线？我需要两点之间的最短路径。它可以是任何类型的线。

【问题讨论】：

你想要一条“直线”还是顺着道路？

【参考方案1】：

这是一种绘制线条的 API v3 方法。

var line = new google.maps.Polyline(
    path: [
        new google.maps.LatLng(37.4419, -122.1419), 
        new google.maps.LatLng(37.4519, -122.1519)
    ],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 10,
    map: map
);

这只是在两点之间画一条直线。如果您希望它是最短路径，则需要考虑地球是弯曲的这一事实，并绘制一条测地线。为此，您必须通过添加此可选 libraries 参数来使用 Google Maps API 中的 geometry 库：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

然后只需将geodesic: true 添加到您的折线选项中：

var line = new google.maps.Polyline(
    path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 10,
    geodesic: true,
    map: map
);

【讨论】：

查看此链接：***.com/questions/17377058/…

指向文档的链接将是黄金。

【参考方案2】：

仅适用于 API v2！

以下代码 sn-p 在两点之间创建一条 10 像素宽的红色折线：

var polyline = new GPolyline([
  new GLatLng(37.4419, -122.1419),
  new GLatLng(37.4519, -122.1519)],
  "#ff0000", 10);
map.addOverlay(polyline);

您可以找到文档here。

【讨论】：

这适用于 API v2，该 API v2 已弃用，将于 2013 年 5 月停止工作。强烈建议不要使用它，而改用 API v3。

【参考方案3】：

这会在两点之间画一条线……甚至更远。您只需继续在搜索框中输入新地点，它就会继续绘制最近两点之间的点：

SEE WORKING EXAMPLE HERE

HTML：

<div id="inputDiv">
    <input id="startvalue" type="text"  value="" autofocus placeholder="Keep Adding Places and searching...">
</div>
<div id="map"></div>
<div id="results"></div>

JS：

var geocoder;
var map;
var location1;
var location2;

$(document).ready(function()
    initialize();    
    $("#startvalue").on('keydown',function(event)
        if (event.keyCode == 13 ) 
            createLine();
            $(this).val("");
            $(this).focus();
        
    );

)

function initialize()
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(7.5653, 80.4303);
    var mapOptions = 
        zoom: 4,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    
    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    setZoom();

    var input = /** @type htmlInputElement */(
    document.getElementById('startvalue'));

    var searchBox = new google.maps.places.SearchBox(
    /** @type HTMLInputElement */(input));



var address;
var address2;
function createLine()

    if (address)
        address2 = document.getElementById('startvalue').value;     
     else 
        address = document.getElementById('startvalue').value;     
    

    var temp, temp2;

    geocoder.geocode( 'address': address , function (results, status) 
        // if (status != "OK") alert("geocode of address:"+address+" failed, status="+status);
        temp = results[0].geometry.location;
        if (address2)
            geocoder.geocode( 'address': address2 , function (results, status) 
                // if (status != "OK") alert("geocode of address:"+address+" failed, status="+status);
                temp2 = results[0].geometry.location;
                document.getElementById('results').innerHTML += temp2.toUrlValue()+"<br>";

                var route = [
                    temp,
                    temp2
                ];

                var polyline = new google.maps.Polyline(
                    path: route,
                    strokeColor: "#FF5E56",
                    strokeOpacity: 0.6,
                    strokeWeight: 5
                );
                location1 = convertLocationToLatLong(temp.toUrlValue())
                location2 = convertLocationToLatLong(temp2.toUrlValue())



                var lengthInMeters = google.maps.geometry.spherical.computeLength(polyline.getPath());
                document.getElementById('results').innerHTML += "Polyline is "+lengthInMeters+" meters long<br>";

                polyline.setMap(map);
                plotMap(location1,location2);
            );   
            address = address2;          
         else 
            location1 = convertLocationToLatLong(temp.toUrlValue());
            plotMap(location1);
        
    );


function convertLocationToLatLong(location)
    var location = location.split(',').map(function(item) 
        return parseFloat(item);
    );
    return location


function plotMap(location1,location2)
    var location1 = new google.maps.LatLng(location1[0],location1[1]);
    if (location2)
        var location2 = new google.maps.LatLng(location2[0],location2[1]);      
    
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(location1);
    if(location2)
        bounds.extend(location2);    
    
    map.fitBounds(bounds);       
    setZoom();


function setZoom()
    google.maps.event.addListener(map, 'zoom_changed', function() 
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) 
            if (this.getZoom() > 15 && this.initialZoom == true) 
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            
            google.maps.event.removeListener(zoomChangeBoundsListener);
        );
    );
    map.initialZoom = true;

CSS：

#map 
    margin: 0;
    padding: 0;
    height: 400px;
    margin-top:30px;
   width:100%;


#inputDiv
    position:absolute;
    top:0;


#startvalue
  width:300px;
  padding:8px;

【讨论】：

输入应该是什么样的？什么是地方？经纬度点？