4
У меня есть список магазинов, который содержит широту и долготу, и у меня есть широта и долгота пользователя.Как я могу использовать пользовательский значок в марке ng-map (угловой)?
когда пользователь нажимает кнопку на карте два маркеров, показывая на карте, которая идентифицировать пользовательское и Местонахождение
как я могу изменить, что два маркера иконки вместо маркеров по умолчанию A и B, как я могу использовать свои собственные иконки для маркер 1. http://www.clker.com/cliparts/U/M/C/p/x/C/google-maps-pin-green.svg
2. http://www.clker.com/cliparts/q/I/Q/u/Z/1/marker-hi.png
angular.module('myApp', ['ngMap'])
.controller("myCntrl", function ($scope) {
var _lat1 =12.904778 ;
\t var _lon1 =77.585680;
\t $scope.lat = _lat1;
\t $scope.lon = _lon1;
$scope.positions = [{pos:[$scope.lat, $scope.lon],name:"User"}];
$scope.center = [$scope.lat, $scope.lon];
$scope.viewMap = false;
$scope.updateMap = function(dealer) {
$scope.lat1 = dealer.S_Latitude;
\t $scope.lon1 = dealer.S_Longitude;
\t icon : 'http://www.clker.com/cliparts/q/I/Q/u/Z/1/marker-hi.png',
$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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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 }
)<!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>
<style>
.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>
\t \t \t \t {{dealer.S_Email_id}}<br>
\t \t \t \t {{dealer.S_clocation}}
<input type="button" name="map" id="map" value="map" ng-click="updateMap(dealer);"><br><br>
\t \t \t </div>
\t \t \t </div>
\t \t \t <br><br><br>
</div>
</body>
</html>
Я новичок в угловой, пожалуйста, помогите мне.если вы не возражаете, пожалуйста, обновите мой код –
Я предоставил вам ответ, я не буду писать ваш код для вас, это не то, для чего предназначен StackOverflow. – itsphilz
Acutally я не знаю, где я должен добавить этот код. я борюсь, поэтому я спросил, извините –