Как показать местоположение пользователя и местоположение магазина с расстоянием между пользователем и магазином на карте google?

Question

У меня есть список магазинов, который содержит широту и долготу. Здесь у меня есть широта и долгота пользователей, и у меня есть расчет расстояния между магазином и пользователем. Все работает нормально. i, что список у меня есть одна кнопка (карта), когда я нажимаю на эту кнопку, один div должен появиться с google map. В этой карте Google мне нужно показать два маркера. Это пользователь (текущий маркер местоположения пользователя), а другой - магазин (store маркер местоположения). и мне нужно показать расстояние между магазином и пользователем. пожалуйста кто-нибудь помочь мне двигаться вперед я был опробована 3 дня й добавили моей скрипку http://jsfiddle.net/rpbn6u23/21/

angular.module('myApp', []) 
 
    .controller("myCntrl", function ($scope) { 
 
    //$scope.query = " Regular Service,Hardware Faults,overall maintenance"; 
 
    $scope.dealers = [{ 
 
     
 
     S_Email_id: "aditiya@gmail.com", 
 
     S_Store: "samsung", 
 
     Store_Name: "Adtiya Samsung Store", 
 
     S_Services: "Regular Service,Software Faults,Hardware Faults", 
 
     Store_long_description: "Undertake all kind of samsung mobiles", 
 
     Store_short_description: "Undertake all kind of samsung mobiles", 
 
\t \t S_Latitude: "12.93489905", 
 
\t \t S_Longitude: "77.57070772", 
 
\t \t S_clocation: "" 
 
    }, { 
 
     
 
     S_Email_id: "rajs@gmail.com", 
 
     S_Store: "nokia", 
 
     Store_Name: "sri shakthi mobile service", 
 
     S_Services: "Settings Faults,Regular Service,Hardware Faults", 
 
     Store_long_description: "Undertake all kind of nokia mobiles", 
 
     Store_short_description: "Undertake all kind of nokia mobiles", 
 
\t \t S_Latitude: "12.9599264", 
 
\t \t S_Longitude: "77.5924983", 
 
\t \t S_clocation: "" 
 
    }, { 
 
     
 
     S_Email_id: "sprtive23@gmail.com", 
 
     S_Store: "nokia,samsung", 
 
     Store_Name: "sun mobile service center", 
 
     S_Services: "Regular Service,overall maintenance,Mobile Shield Installation", 
 
     Store_long_description: "Undertake all kind of nokia,samsung mobiles", 
 
     Store_short_description: "Undertake all kind of nokia,samsung mobiles", 
 
\t \t S_Latitude: "12.911229", 
 
\t \t S_Longitude: "77.519281", 
 
\t \t S_clocation:"" 
 
\t \t }, 
 
\t { 
 
     
 
     S_Email_id: "super@gmail.com", 
 
     S_Store: "nokia,samsung", 
 
     Store_Name: "ragu mobile service center", 
 
     S_Services: "Regular Service,overall maintenance,Mobile Shield Installation", 
 
     Store_long_description: "Undertake all kind of nokia,samsung mobiles", 
 
     Store_short_description: "Undertake all kind of nokia,samsung mobiles", 
 
\t \t S_Latitude: "12.909999", 
 
\t \t S_Longitude: "77.506871", 
 
\t \t S_clocation: "" 
 
\t \t } 
 
    ] 
 
\t var _lat1 =12.904778 ; 
 
\t var _lon1 =77.585680; 
 
\t 
 
       var d = $scope.dealers.length; 
 
\t for (var i = 0; i < d; i++) { 
 

 

 

 
          var _lat2 = $scope.dealers[i].S_Latitude; 
 
          var _lon2 = $scope.dealers[i].S_Longitude; 
 

 
          //--------------------------------------distance calculation------------------------------------- 
 
          function _getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) { 
 
           var R = 6371; // Radius of the earth in kilometers 
 
           var dLat = deg2rad(lat2 - lat1); // deg2rad below 
 
           var dLon = deg2rad(lon2 - lon1); 
 
           var a = 
 
            Math.sin(dLat/2) * Math.sin(dLat/2) + 
 
            Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
 
            Math.sin(dLon/2) * Math.sin(dLon/2); 
 
           var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); 
 
           var d = R * c; // Distance in KM 
 
           return d; 
 
          } 
 

 
          function deg2rad(deg) { 
 
           return deg * (Math.PI/180) 
 
          } 
 

 

 

 
          // precise value 
 
          var _d = "Precise value: " + _getDistanceFromLatLonInKm(_lat1, _lon1, _lat2, _lon2); 
 

 

 

 

 
          _d = Math.round(_getDistanceFromLatLonInKm(_lat1, _lon1, _lat2, _lon2) * 100)/100; 
 

 
     \t \t \t \t \t $scope.dealers[i].distance = _d; 
 
\t \t \t \t \t \t \t console.log(_d); 
 

 
          
 

 
          //----------------------------------------------------------------------------------------------- 
 
         } 
 
\t } 
 
)

<div ng-app="myApp"> 
 
    <div ng-controller="myCntrl"> 
 
     <label>Case sensitive Search on Label</label><br> 
 
     <input ng-model="query" type="text" placeholder="Search for name" /> 
 
     
 
     
 
      <div ng-repeat="dealer in dealers"> 
 
          
 
       {{dealer.Store_Name}}<br> 
 
\t \t \t \t {{dealer.S_Email_id}}<br> 
 
\t \t \t \t {{dealer.S_clocation}} 
 
       Distance: {{dealer.distance}}<br> 
 
       <input type="button" name="map" id="map" value="map"><br><br> 
 
\t \t \t \t </div><br><br><br> 
 
       
 
    
 
     </div> 
 
\t \t </div>

Answer 1

Я создал скрипку для вашего вопроса.

Я взял ссылку из http://ngmap.github.io/#/directions-with-custom-marker.html

Я лично нашел, что это легко осуществить.

** Скрипка: http://plnkr.co/edit/A6BUeeGwEDmjIngRHhSE?p=preview

Если скрипка не работает:

index.html:

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script src="http://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script> 
<script src="http://code.angularjs.org/1.4.7/angular.js"></script> 
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
<script src="script.js"></script> 
<style> 
    /* Styles go here */ 

    .custom-marker { 
    font-size: 2em; 
    padding: 10px; 
    background: #fff; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    border: #7F7F7F solid 1px; 
    text-align: center; 
    } 
    .custom-marker:after { 
    content: ''; 
    position: absolute; 
    border-style: solid; 
    border-width: 7px 6px 0; 
    border-color: #fff transparent; 
    display: block; 
    width: 0; 
    z-index: 1; 
    margin-left: -6px; 
    bottom: -6px; 
    left: 50%; 
    } 
    .custom-marker:before { 
    content: ''; 
    position: absolute; 
    border-style: solid; 
    border-width: 7px 6px 0; 
    border-color: #7F7F7F transparent; 
    display: block; 
    width: 0; 
    z-index: 0; 
    margin-left: -6px; 
    bottom: -7px; 
    left: 50%; 
    } 
    </style> 
</head> 

<body> 
    <div ng-controller="myCntrl"> 
     <label>Case sensitive Search on Label</label><br> 
     <input ng-model="query" type="text" placeholder="Search for name" /> 
     <div> 
     <ng-map zoom="12" center="{{lat}}, {{lon}}"> 

      <directions 
      draggable="true" 
      panel="directions-panel" 
      travel-mode="DRIVING" 
      origin="{{lat}}, {{lon}}" 
      destination="{{lat1}}, {{lon1}}"> 
     </directions> 


     </ng-map> 
     <br><br><br> 
     </div> 
     <div> 
     <div ng-repeat="dealer in dealers"> 
     {{dealer.Store_Name}}<br> 
       {{dealer.S_Email_id}}<br> 
       {{dealer.S_clocation}} 
     Distance: {{dealer.distance}}<br> 
     <input type="button" name="map" id="map" value="map" ng-click="updateMap(dealer);"><br><br> 
      </div> 
      </div> 
      <br><br><br> 
    </div> 
</body> 
</html> 

script.js:

// Код идет здесь

angular.module('myApp', ['ngMap']) 
    .controller("myCntrl", function ($scope) { 
     var _lat1 =12.904778 ; 
     var _lon1 =77.585680; 
     $scope.lat = _lat1; 
     $scope.lon = _lon1; 
     $scope.positions = [{pos:[$scope.lat, $scope.lon],name:"User"}]; 
     $scope.center = [$scope.lat, $scope.lon]; 

     //$scope.query = " Regular Service,Hardware Faults,overall maintenance"; 
     $scope.viewMap = false; 
     $scope.updateMap = function(dealer) { 
     $scope.lat1 = dealer.S_Latitude; 
      $scope.lon1 = dealer.S_Longitude; 
     $scope.positions = [{pos:[$scope.lat, $scope.lon],name:"User"}, {pos:[dealer.S_Latitude, dealer.S_Longitude],name:"Store"}]; 
     $scope.viewMap = true; 
     $scope.path = [[$scope.lat, $scope.lon], [dealer.S_Latitude, dealer.S_Longitude]]; 
     } 

    $scope.dealers = [{ 

     S_Email_id: "aditiya@gmail.com", 
     S_Store: "samsung", 
     Store_Name: "Adtiya Samsung Store", 
     S_Services: "Regular Service,Software Faults,Hardware Faults", 
     Store_long_description: "Undertake all kind of samsung mobiles", 
     Store_short_description: "Undertake all kind of samsung mobiles", 
     S_Latitude: "12.93489905", 
     S_Longitude: "77.57070772", 
     S_clocation: "" 
    }, { 

     S_Email_id: "rajs@gmail.com", 
     S_Store: "nokia", 
     Store_Name: "sri shakthi mobile service", 
     S_Services: "Settings Faults,Regular Service,Hardware Faults", 
     Store_long_description: "Undertake all kind of nokia mobiles", 
     Store_short_description: "Undertake all kind of nokia mobiles", 
     S_Latitude: "12.9599264", 
     S_Longitude: "77.5924983", 
     S_clocation: "" 
    }, { 

     S_Email_id: "sprtive23@gmail.com", 
     S_Store: "nokia,samsung", 
     Store_Name: "sun mobile service center", 
     S_Services: "Regular Service,overall maintenance,Mobile Shield Installation", 
     Store_long_description: "Undertake all kind of nokia,samsung mobiles", 
     Store_short_description: "Undertake all kind of nokia,samsung mobiles", 
     S_Latitude: "12.911229", 
     S_Longitude: "77.519281", 
     S_clocation:"" 
     }, 
    { 

     S_Email_id: "super@gmail.com", 
     S_Store: "nokia,samsung", 
     Store_Name: "ragu mobile service center", 
     S_Services: "Regular Service,overall maintenance,Mobile Shield Installation", 
     Store_long_description: "Undertake all kind of nokia,samsung mobiles", 
     Store_short_description: "Undertake all kind of nokia,samsung mobiles", 
     S_Latitude: "12.909999", 
     S_Longitude: "77.506871", 
     S_clocation: "" 
     } 
    ] 

    var d = $scope.dealers.length; 

    for (var i = 0; i < d; i++) { 



          var _lat2 = $scope.dealers[i].S_Latitude; 
          var _lon2 = $scope.dealers[i].S_Longitude; 

          //--------------------------------------distance calculation------------------------------------- 
          function _getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) { 
           var R = 6371; // Radius of the earth in kilometers 
           var dLat = deg2rad(lat2 - lat1); // deg2rad below 
           var dLon = deg2rad(lon2 - lon1); 
           var a = 
            Math.sin(dLat/2) * Math.sin(dLat/2) + 
            Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
            Math.sin(dLon/2) * Math.sin(dLon/2); 
           var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); 
           var d = R * c; // Distance in KM 
           return d; 
          } 

          function deg2rad(deg) { 
           return deg * (Math.PI/180) 
          } 



          // precise value 
          var _d = "Precise value: " + _getDistanceFromLatLonInKm(_lat1, _lon1, _lat2, _lon2); 




          _d = Math.round(_getDistanceFromLatLonInKm(_lat1, _lon1, _lat2, _lon2) * 100)/100; 

          $scope.dealers[i].distance = _d; 
          console.log(_d); 



          //----------------------------------------------------------------------------------------------- 
         } 

    } 
) 

Надеюсь, это поможет!

Cheers, James