Javascript 谷歌地图API应用程序当前位置居中初始地图，并在我的应用程序中用作原点，点击地图的目的地

我在我的应用程序中用粗体显示了我需要更改的内容，我不知道如何使其工作，使用用户在站点上的当前位置将地图居中，并将其用作方向API的原始值，同时我还有一个静态值作为目的地，但我想将其更改为“单击”

基本上，忽略航路点，但我希望它在用户位置加载地图，输入该值作为原点，而不是静态目的地，我希望用户单击，然后它将运行，给出从他们所在位置到他们单击位置的方向

" `var waypts = new Array();
<!-- var directionsService; -->
<!-- var directionsDisplay; -->
var bool = false, bool1 = false;
function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: CURRENT LOCATION, lng: CURRENT LOCATION}
  });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);


}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {


  var locations = new Array(I have waypoints I enter here)
  var channel_id = KEY;
    var api_key = 'KEY';
    var bin = [];

    var j=0, k=0;
    for(i=1; i<=locations.length; i++){
        $.getJSON('http://api.thingspeak.com/channels/' + channel_id + '/field/' + i + '/last',
            function(data) { 
                if(data > 0)  {
                    waypts.push({
                      location: '' + locations[j++],
                      stopover: true
                      });
                }
            k++; if(k==locations.length) { show(directionsService, directionsDisplay); }
            });

    }

    function show(directionsService, directionsDisplay){
console.log(waypts);
  directionsService.route({
    origin: 'NEED CURRENT VALUE',
    destination: 'CLICK ON MAP',
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      //document.getElementById('waypoints').innerHTML = response.routes[0].waypoint_order;
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      //summaryPanel.innerHTML = '';
      // For each route, display summary information.
      console.log(route);
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        <!-- summaryPanel.innerHTML += Route.legs[i]; -->
        <!-- document.getElementById("directions-panel").innerHTML= route.legs[i].start_address + '<br>'; -->
        //summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + 
        //'</b><br>';
        //document.getElementById("ul_list").innerHTML+= '<li>'+route.legs[i].start_address +'</li>'; 
        for (var j = 0; j < route.legs[i].steps.length; j++) {
            document.getElementById("ul_list").innerHTML+= '<li>'+route.legs[i].steps[j].instructions +'</li>'; 
        }
        //document.getElementById("ul_list").innerHTML+=  '<li>'+route.legs[i].end_address +'<li>';
        //document.getElementById("#buttet2").innerHTML= route.legs[i].end_address + '<br>'; 
        //summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';

      }
      document.getElementById("ul_list").innerHTML+= '<li>'+route.legs[i].start_address +'</li>'; 
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });

  bool = true;
}

</script>
</body>
</html>`

“`var waypts=new Array（）；
var bool=false，bool1=false；
函数initMap（）{
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：6，
中心：{纬度：当前位置，液化天然气：当前位置}
});
方向显示.setMap（地图）；
计算显示路线（方向服务、方向显示）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
var位置=新阵列（我在此处输入了航路点）
var信道_id=密钥；
var api_key='key'；
var-bin=[]；
var j=0，k=0；
对于（i=1；i 0）{
推({
位置：“”+位置[j++]，
中途停留：对
});
}
k++；if（k==locations.length）{show（directionsService，directionsDisplay）；}
});
}
功能显示（方向服务、方向显示）{
控制台日志（waypts）；
方向服务.路线({
来源：“需要当前值”，
目的地：'点击地图'，
航路点：航路点，
航路点：对，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
//document.getElementById（'waypoints'）。innerHTML=response.routes[0]。waypoint\u order；
方向显示。设置方向（响应）；
var route=response.routes[0]；
var summaryPanel=document.getElementById（'directions-panel'）；
//summaryPanel.innerHTML=''；
//对于每个管线，显示摘要信息。
控制台日志（路由）；
对于（var i=0；i”；
//document.getElementById（“ul_列表”）.innerHTML+='
'+route.legs[i]。起始地址+'
'；
对于（var j=0；j'；
}
//document.getElementById（“ul_列表”）.innerHTML+='
'+route.legs[i]。end_地址+'
'；
//document.getElementById（“#buttet2”）.innerHTML=route.legs[i]。end_address+'
'；
//summaryPanel.innerHTML+=route.legs[i].distance.text+'

'；
}
document.getElementById（“ul_列表”）.innerHTML+='
'+route.legs[i]。起始地址+'
'；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
布尔=真；
}
`

您可以使用获取用户的当前位置（如果浏览器支持，并且用户已授予应用程序使用其位置的权限）作为一个

google.maps.LatLng

对象，可以设置为方向请求的

origin

。然后可以在

google.maps.Map

对象上设置一个侦听器，以获取单击位置的

LatLng

，然后调用

方向服务的
route（）
方法

这是一个可以找到用户位置的，但如果地理定位失败，则默认为洛杉矶。原点为绿色圆圈。然后，您可以单击地图上的红色圆圈，然后绘制方向

守则：

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map;
      function initMap() {

        var origin = new google.maps.LatLng(34.051659,-118.249085);

        map = new google.maps.Map(document.getElementById('map'), {
          center:  origin,
          zoom: 14,
          gestureHandling: "greedy"
        });

        var marker1 = new google.maps.Marker({
            icon: {path: google.maps.SymbolPath.CIRCLE,
              scale: 5,
              strokeColor: '#338833',
              strokeOpacity: 0.5
            },
            animation:  google.maps.Animation.BOUNCE,
            map: map,
            position: origin,
            title: "start"
        });

        var marker2 = new google.maps.Marker({
            icon: {path: google.maps.SymbolPath.CIRCLE,
              scale: 5,
              strokeColor: '#FF0000',
              strokeOpacity: 0.5
            },
            animation:  google.maps.Animation.BOUNCE,
            map: map,
            title: "finish"
        });

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            origin = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(origin);
            marker1.setPosition(origin);
          }, function() {
            alert("Error: The Geolocation service failed. Using default location");
          });
        } else {
          alert("Error: Your browser doesn't support geolocation. Using default location");
        }

        var directionsService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(map);

        map.addListener('click', function(event) {
            var destination = event.latLng;
            marker2.setPosition(destination);
            directionsService.route({
                origin: origin,
                destination: destination,
                travelMode: 'DRIVING'
            }, function(response, status) {
              if (status === 'OK') {
            directionsRenderer.setDirections(response);
              } else {
                window.alert('Directions request failed due to ' + status);
              }
            });
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_KEY">
    </script>
  </body>
</html>


地理定位
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
//注意：此示例要求您在以下情况下同意位置共享：
//由浏览器提示。如果您看到“地理定位服务”错误
//失败。“，这意味着您可能没有授予浏览器访问的权限
//找到你。
var映射；
函数initMap（）{
var origin=new google.maps.LatLng（34.051659，-118.249085）；
map=new google.maps.map（document.getElementById（'map'）{
中心：起源，
缩放：14，
手势处理：“贪婪”
});
var marker1=新的google.maps.Marker({
图标：{path:google.maps.SymbolPath.CIRCLE，
比例：5，
strokeColor:“#338833”，
笔划不透明度：0.5
},
动画：google.maps.animation.BOUNCE，
地图：地图，
位置：原点，
标题：“开始”
});
var marker2=新的google.maps.Marker({
图标：{path:google.maps.SymbolPath.CIRCLE，
比例：5，
strokeColor:“#FF0000”，
笔划不透明度：0.5
},
动画：google.maps.animation.BOUNCE，
地图：地图，
标题：“完成”
});
//试试HTML5地理定位。
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
origin=new google.maps.LatLng（position.coords.lation，position.coords.longitude）；
地图设置中心（原点）；
标记1.设置位置（原点）；