如何更改 ng-map 标记的文本 'A' 和 'B'
how to change the ng-map marker's text 'A' and 'B'
您好,我想更改 ng-map 的标记文本。它应该分别显示 "start" 和 "end" 而不是 "A" 和 "B"。
我确实提到了 ,但没有成功。
它在标记上同时显示文本 "start" 和 "A"。
此外,如果您观察,源和目的地之间的距离与实际 google 地图显示的不同。
所以我在这里有三个问题。
1) 更改标记文本 "start" 而不是 "A"
2) 源和目的地之间的距离
3) 我想在点击按钮 "Draw Map" 时使用 AngularJS 显示这张地图。
下面是我的代码。
var mainModule = angular.module('mainApp',['ngRoute', 'ngMap']);
mainModule.controller('mapCtrl', function($scope){
$scope.sources = ["mumbai", "pune", "bangalore", "delhi", "netherlands"];
$scope.destinations = ["pune", "bangalore", "mumbai", "delhi", "andorra"];
$scope.origin = "mumbai";
$scope.dest = "pune";
$scope.drawMap = function(){
var sourceVal = $('#sourceDdl').val();
var destnVal = $("#destinationDdl").val();
$scope.origin = sourceVal;
$scope.dest = destnVal;
}
});
body {
overflow: auto;
background-color: #000000;
}
/* google map */
.ng-map-section{
width: 800px;
height: 600px;
overflow: hidden;
position: relative;
background: #e6e6e6;
border: 20px solid #FFF;
margin-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>ng-map</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container ng-map-section" ng-app="mainApp" ng-controller="mapCtrl">
<div style="float:left;width:70%;">
<ng-map zoom="14" center="" style="height:600px">
<directions
draggable="true"
travel-mode="DRIVING"
origin="{{origin}}"
destination="{{dest}}"
suppressMarkers='true'>
</directions>
<custom-marker id="start" position="{{origin}}">
<div> Start </div>
</custom-marker>
<custom-marker id="end" position="{{dest}}">
<div> End </div>
</custom-marker>
</ng-map>
</div>
<div style="float:right;width:28%">
<label for="sourceDdl">Source: </label>
<select id="sourceDdl">
<option ng-repeat="source in sources" value="{{source}}">{{source}}</option>
</select>
<br><br>
<label for="destinationDdl">Destination: </label>
<select id="destinationDdl">
<option ng-repeat="destination in destinations" value="{{destination}}">{{destination}}</option>
</select>
<br><br>
<label>Distance: {{map.directionsRenderers[0].directions.routes[0].overview_path.length}}</label><br>
<input type="button" ng-click="drawMap()" value="Draw Map">
</div>
<!--
<div id="directions-panel" style="width: 28%; float:left; height: 100%; overflow: auto; padding: 0px 5px">
</div>-->
</div>
</body>
</html>
for 1) 你可以只添加标签="X"
名称属性应为suppress-markers
,因此将suppressmarkers='true'
替换为suppress-markers="true"
更新示例
angular.module('mainApp', ['ngRoute', 'ngMap'])
.controller('mapCtrl', function($scope) {
$scope.sources = ["mumbai", "pune", "bangalore", "delhi", "netherlands"];
$scope.destinations = ["pune", "bangalore", "mumbai", "delhi", "andorra"];
$scope.origin = "mumbai";
$scope.dest = "pune";
$scope.drawMap = function() {
var sourceVal = $('#sourceDdl').val();
var destnVal = $("#destinationDdl").val();
$scope.origin = sourceVal;
$scope.dest = destnVal;
}
});
body {
overflow: auto;
background-color: #000000;
}
/* google map */
.ng-map-section{
width: 800px;
height: 600px;
overflow: hidden;
position: relative;
background: #e6e6e6;
border: 20px solid #FFF;
margin-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div class="container ng-map-section" ng-app="mainApp" ng-controller="mapCtrl">
<div style="float:left;width:70%;">
<ng-map zoom="14" center="" style="height:600px">
<directions
draggable="true"
travel-mode="DRIVING"
origin="{{origin}}"
destination="{{dest}}"
suppress-markers="true">
</directions>
<custom-marker id="start" position="{{origin}}">
<h3> Start </h3>
</custom-marker>
<custom-marker id="end" position="{{dest}}">
<h3> End </h3>
</custom-marker>
</ng-map>
</div>
<div style="float:right;width:28%">
<label for="sourceDdl">Source: </label>
<select id="sourceDdl">
<option ng-repeat="source in sources" value="{{source}}">{{source}}</option>
</select>
<br>
<br>
<label for="destinationDdl">Destination: </label>
<select id="destinationDdl">
<option ng-repeat="destination in destinations" value="{{destination}}">{{destination}}</option>
</select>
<br>
<br>
<label>Distance: {{map.directionsRenderers[0].directions.routes[0].overview_path.length}}</label>
<br>
<input type="button" ng-click="drawMap()" value="Draw Map">
</div>
</div>
您好,我想更改 ng-map 的标记文本。它应该分别显示 "start" 和 "end" 而不是 "A" 和 "B"。
我确实提到了
此外,如果您观察,源和目的地之间的距离与实际 google 地图显示的不同。
所以我在这里有三个问题。
1) 更改标记文本 "start" 而不是 "A"
2) 源和目的地之间的距离
3) 我想在点击按钮 "Draw Map" 时使用 AngularJS 显示这张地图。
下面是我的代码。
var mainModule = angular.module('mainApp',['ngRoute', 'ngMap']);
mainModule.controller('mapCtrl', function($scope){
$scope.sources = ["mumbai", "pune", "bangalore", "delhi", "netherlands"];
$scope.destinations = ["pune", "bangalore", "mumbai", "delhi", "andorra"];
$scope.origin = "mumbai";
$scope.dest = "pune";
$scope.drawMap = function(){
var sourceVal = $('#sourceDdl').val();
var destnVal = $("#destinationDdl").val();
$scope.origin = sourceVal;
$scope.dest = destnVal;
}
});
body {
overflow: auto;
background-color: #000000;
}
/* google map */
.ng-map-section{
width: 800px;
height: 600px;
overflow: hidden;
position: relative;
background: #e6e6e6;
border: 20px solid #FFF;
margin-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>ng-map</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container ng-map-section" ng-app="mainApp" ng-controller="mapCtrl">
<div style="float:left;width:70%;">
<ng-map zoom="14" center="" style="height:600px">
<directions
draggable="true"
travel-mode="DRIVING"
origin="{{origin}}"
destination="{{dest}}"
suppressMarkers='true'>
</directions>
<custom-marker id="start" position="{{origin}}">
<div> Start </div>
</custom-marker>
<custom-marker id="end" position="{{dest}}">
<div> End </div>
</custom-marker>
</ng-map>
</div>
<div style="float:right;width:28%">
<label for="sourceDdl">Source: </label>
<select id="sourceDdl">
<option ng-repeat="source in sources" value="{{source}}">{{source}}</option>
</select>
<br><br>
<label for="destinationDdl">Destination: </label>
<select id="destinationDdl">
<option ng-repeat="destination in destinations" value="{{destination}}">{{destination}}</option>
</select>
<br><br>
<label>Distance: {{map.directionsRenderers[0].directions.routes[0].overview_path.length}}</label><br>
<input type="button" ng-click="drawMap()" value="Draw Map">
</div>
<!--
<div id="directions-panel" style="width: 28%; float:left; height: 100%; overflow: auto; padding: 0px 5px">
</div>-->
</div>
</body>
</html>
for 1) 你可以只添加标签="X"
名称属性应为suppress-markers
,因此将suppressmarkers='true'
替换为suppress-markers="true"
更新示例
angular.module('mainApp', ['ngRoute', 'ngMap'])
.controller('mapCtrl', function($scope) {
$scope.sources = ["mumbai", "pune", "bangalore", "delhi", "netherlands"];
$scope.destinations = ["pune", "bangalore", "mumbai", "delhi", "andorra"];
$scope.origin = "mumbai";
$scope.dest = "pune";
$scope.drawMap = function() {
var sourceVal = $('#sourceDdl').val();
var destnVal = $("#destinationDdl").val();
$scope.origin = sourceVal;
$scope.dest = destnVal;
}
});
body {
overflow: auto;
background-color: #000000;
}
/* google map */
.ng-map-section{
width: 800px;
height: 600px;
overflow: hidden;
position: relative;
background: #e6e6e6;
border: 20px solid #FFF;
margin-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div class="container ng-map-section" ng-app="mainApp" ng-controller="mapCtrl">
<div style="float:left;width:70%;">
<ng-map zoom="14" center="" style="height:600px">
<directions
draggable="true"
travel-mode="DRIVING"
origin="{{origin}}"
destination="{{dest}}"
suppress-markers="true">
</directions>
<custom-marker id="start" position="{{origin}}">
<h3> Start </h3>
</custom-marker>
<custom-marker id="end" position="{{dest}}">
<h3> End </h3>
</custom-marker>
</ng-map>
</div>
<div style="float:right;width:28%">
<label for="sourceDdl">Source: </label>
<select id="sourceDdl">
<option ng-repeat="source in sources" value="{{source}}">{{source}}</option>
</select>
<br>
<br>
<label for="destinationDdl">Destination: </label>
<select id="destinationDdl">
<option ng-repeat="destination in destinations" value="{{destination}}">{{destination}}</option>
</select>
<br>
<br>
<label>Distance: {{map.directionsRenderers[0].directions.routes[0].overview_path.length}}</label>
<br>
<input type="button" ng-click="drawMap()" value="Draw Map">
</div>
</div>