Как создать этот продукт с помощью Google Maps?

#google-maps #google-maps-api-3 #google-maps-markers

#google-карты #google-maps-api-3 #google-карты-маркеры

Вопрос:

Я хочу создать точную копию веб-сайта с другим ориентиром, на который нужно указывать.

Не могли бы вы , пожалуйста , сказать мне , чему я должен научиться , чтобы сделать это , пожалуйста ?

Пока что я создал это и не знаю, что делать дальше :

https://jsfiddle.net/hasnain721/01v7s2m4/6/

Кстати, я очень простой программист!

Заранее спасибо!

 var map = new google.maps.Map(document.getElementById("map"), {
   center: new google.maps.LatLng(53.3478, -6.2597),
   zoom: 16,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var infoWindow = new google.maps.InfoWindow({
   map: map
 });
 // Try HTML5 geolocation.
 if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function(position) {
       var pos = {
         lat: position.coords.latitude,
         lng: position.coords.longitude
       };
       //infoWindow.setPosition(pos);
       // infoWindow.setContent('<b>You are here.</b><br><b>Lat:</b> ' position.coords.latitude '<br><b>Lon:</b> ' position.coords.longitude);  
       map.setCenter(pos);
       var marker = new google.maps.Marker({
         position: pos,
         map: map,
         title: String(pos.lat)   ", "   String(pos.lng),
       });

       //draws out the path from current location to landmark
       var flightPlanCoordinates = [{
           lat: position.coords.latitude,
           lng: position.coords.longitude
         },
         {
           lat: 21.4224779,
           lng: 39.8251832
         }
       ];
       var flightPath = new google.maps.Polyline({
         path: flightPlanCoordinates,
         geodesic: true,
         strokeColor: '#FF0000',
         strokeOpacity: 1.0,
         strokeWeight: 2
       });
       flightPath.setMap(map);

       //draws out the path from current location to landmark


     },

     function() {
       handleLocationError(true, infoWindow, map.getCenter());
     });


 } else {
   // Browser doesn't support Geolocation
   handleLocationError(false, infoWindow, map.getCenter());
 }
  

Ответ №1:

Вам нужно изменить координаты переменной «flightPlanCoordinates».

пример, указывающий на статую Свободы :

   var flightPlanCoordinates = [
    {lat: position.coords.latitude, lng: position.coords.longitude},
    {lat: 40.689249, lng: -74.0445}
  ];
  

Комментарии:

1. Спасибо за ответ, Варен. Я правильно установил пункт назначения в соответствии с тем, что я хочу. Карта может отображать текущее местоположение, местоположение пункта назначения и проводить линию между ними. Мой вопрос в том, что мне делать дальше, чтобы сделать его похожим qiblafinder.withgoogle.com/intl/en ? Я должен каким-то образом использовать компас, чтобы указать направление к месту назначения. Спасибо!!