如何连接谷歌地图中的两个点..? [英] How to connect two points in Google map..?

问题描述

 函数 createLine(){地理编码器 = 新的 google.maps.Geocoder();var latlng = new google.maps.LatLng(7.5653, 80.4303);var mapOptions = {变焦:8，中心:latlng，mapTypeId: google.maps.MapTypeId.ROADMAP}map = new google.maps.Map(document.getElementById("directionpanel"), mapOptions);var address = document.getElementById('startvalue').value;var address2 = document.getElementById('endvalue').value;var temp, temp2;geocoder.geocode({'address': address }, function (results, status) {temp = results[0].geometry.location;});geocoder.geocode({ 'address': address2 }, function (results, status) {temp2 = results[0].geometry.location;});无功路线= [新的 google.maps.LatLng(temp),新的 google.maps.LatLng(temp2)];var polyline = new google.maps.Polyline({路径:路线，strokeColor: "#ff0000",中风不透明度:0.6，行程重量:5});polyline.setMap(map);}

我想画一条直线来连接两个点，但我不会计算那条线的距离.无论如何，我尝试使用此代码连接点，但没有用.请帮助我..

解决方案

地理编码是异步的.尝试这样的事情(从第一个回调中调用第二个地理编码器操作，在第二个回调中使用两者的结果).

函数 createLine(){地理编码器 = 新的 google.maps.Geocoder();var latlng = new google.maps.LatLng(7.5653, 80.4303);var mapOptions = {变焦:8，中心:latlng，mapTypeId: google.maps.MapTypeId.ROADMAP}map = new google.maps.Map(document.getElementById(directionpanel"), mapOptions);var address = document.getElementById('startvalue').value;var address2 = document.getElementById('endvalue').value;var temp, temp2;geocoder.geocode({'address': address }, function (results, status) {temp = results[0].geometry.location;geocoder.geocode({ 'address': address2 }, function (results, status) {temp2 = results[0].geometry.location;无功路线= [温度，温度2];var polyline = new google.maps.Polyline({路径:路线，strokeColor: "#ff0000",中风不透明度:0.6，行程重量:5});polyline.setMap(map);});});}

代码片段:

var geocoder;无功地图；函数初始化(){地理编码器 = 新的 google.maps.Geocoder();var latlng = new google.maps.LatLng(7.5653, 80.4303);var mapOptions = {变焦:8，中心:latlng，mapTypeId: google.maps.MapTypeId.ROADMAP}map = new google.maps.Map(document.getElementById("map"), mapOptions);创建线()；}函数创建线(){var address = document.getElementById('startvalue').value;var address2 = document.getElementById('endvalue').value;var temp, temp2;geocoder.geocode({地址":地址}，功能(结果，状态){if (status != "OK") alert("地址的地理编码:" + address + " failed, status=" + status);temp = results[0].geometry.location;document.getElementById('results').innerHTML += temp.toUrlValue() + "
";geocoder.geocode({地址":地址2}，功能(结果，状态){if (status != "OK") alert("地址的地理编码:" + address + " failed, status=" + status);temp2 = results[0].geometry.location;document.getElementById('results').innerHTML += temp2.​​toUrlValue() + "
";无功路线= [温度，温度2];var polyline = new google.maps.Polyline({路径:路线，strokeColor: "#ff0000",中风不透明度:0.6，行程重量:5});var lengthInMeters = google.maps.geometry.sphereal.computeLength(polyline.getPath());//alert("polyline is "+lengthInMeters+" long");document.getElementById('results').innerHTML += "折线是 " + lengthInMeters + " 米长
";polyline.setMap(map);var bounds = new google.maps.LatLngBounds();边界.扩展(温度)；边界.extend(temp2);map.fitBounds(bounds);});});}google.maps.event.addDomListener(window, 'load', initialize);

html,身体，#地图 {边距:0；填充:0；高度:100%；}

<input id="startvalue" type="text" width="90" value="Megaswewa, Sri Lanka"><;/输入><input id="endvalue" type="text" width="90" value="康提，斯里兰卡"></input><input type="button" value="Geocode" onclick="createLine()"></input><div id="map" style="width:600px;height:500px;"></div><div id="结果"></div><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>

    function createLine()
{

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

        var address = document.getElementById('startvalue').value;
        var address2 = document.getElementById('endvalue').value;

        var temp, temp2;

        geocoder.geocode({ 'address': address }, function (results, status) {
            temp = results[0].geometry.location;
        });
        geocoder.geocode({ 'address': address2 }, function (results, status) {
            temp2 = results[0].geometry.location;
        });

        var route = [
          new google.maps.LatLng(temp),
          new google.maps.LatLng(temp2)
        ];


    var polyline = new google.maps.Polyline({
        path: route,
        strokeColor: "#ff0000",
        strokeOpacity: 0.6,
        strokeWeight: 5
    });

    polyline.setMap(map);


}

I want to draw a direct line to connect two points and i wont to calculate that line distance.any way i try to connect points using this code but it didn't work.Please help me..

解决方案

Geocoding is asynchronous. Try something like this (call the second geocoder operation from the call back of the first, use the results of both inside the call back of the second).

function createLine()
{

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

    var address = document.getElementById('startvalue').value;
    var address2 = document.getElementById('endvalue').value;

    var temp, temp2;

    geocoder.geocode({ 'address': address }, function (results, status) {
        temp = results[0].geometry.location;
        geocoder.geocode({ 'address': address2 }, function (results, status) {
            temp2 = results[0].geometry.location;

        var route = [
          temp,
          temp2
        ];

        var polyline = new google.maps.Polyline({
            path: route,
            strokeColor: "#ff0000",
            strokeOpacity: 0.6,
            strokeWeight: 5
        });

        polyline.setMap(map);
        });
    });
}

working example

code snippet:

var geocoder;
var map;

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

  createLine();
}

function createLine() {

  var address = document.getElementById('startvalue').value;
  var address2 = document.getElementById('endvalue').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;
    document.getElementById('results').innerHTML += temp.toUrlValue() + "<br>";
    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: "#ff0000",
        strokeOpacity: 0.6,
        strokeWeight: 5
      });

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

      polyline.setMap(map);
      var bounds = new google.maps.LatLngBounds();
      bounds.extend(temp);
      bounds.extend(temp2);
      map.fitBounds(bounds);
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  margin: 0;
  padding: 0;
  height: 100%;
}

<input id="startvalue" type="text" width="90" value="Megaswewa, Sri Lanka"></input>
<input id="endvalue" type="text" width="90" value="Kandy, Sri Lanka"></input>
<input type="button" value="Geocode" onclick="createLine()"></input>
<div id="map" style="width:600px;height:500px;"></div>
<div id="results"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>

这篇关于如何连接谷歌地图中的两个点..?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！