如何在Google地图中显示用户位置和商店位置以及用户和商店之间的距离？
[英]How to Show User Location and Store location with distance between user and store in google map?
问题描述
我有包含经度和纬度的商店列表。在这里，我有特定的用户纬度和经度，并且计算了商店和用户之间的距离。一切正常。 在该列表中，当我单击该按钮时，我有一个按钮（地图），一个div应该与google map一起出现。在那张Google地图中，我需要显示两个markers。这是user（用户当前位置标记），另一个是store（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", 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 _lat1 =12.904778 ; var _lon1 =77.585680; 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); //----------------------------------------------------------------------------------------------- } } )
<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> {{dealer.S_Email_id}}<br> {{dealer.S_clocation}} Distance: {{dealer.distance}}<br> <input type="button" name="map" id="map" value="map"><br><br> </div><br><br><br> </div> </div>
1 个解决方案
解决方案1
0 2015-11-20 12:07:31
我为您的问题开了一个小提琴。
我已经从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);
//-----------------------------------------------------------------------------------------------
}
}
)
希望这个能对您有所帮助 ！
干杯，詹姆斯
Javascript：获取行驶距离和时间，并在Google地图中显示当前位置？
[英]Javascript: get driving distance and time and show current location in google map?
使用Google Maps API DistanceMatrixService计算API中当前位置和用户位置之间的距离
[英]Calculate the distance between my current location and user locations from API with Google Maps API DistanceMatrixService
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.