如何更改ng-map标记的文字＆＃39; A＆＃39;和＆＃39; B＆＃39;

时间：2016-05-10 14:36:22

标签： javascript angularjs google-maps ng-map

您好我想更改ng-map的标记文本。它应该显示＆＃34; start＆＃34;和＆＃34;结束＆＃34;而不是＆＃34; A＆＃34;和＆＃34; B＆＃34;分别

我确实提到了this，但没有运气。 它显示了文本＆＃34; start＆＃34;和＆＃34; A＆＃34;关于标记。

此外，如果您观察到，源和目的地之间的距离与实际谷歌地图显示的距离不同。

所以我在这里有三个问题。

1）更改标记文本＆＃34;开始＆＃34;而不是＆＃34; A＆＃34;

2）源和目的地之间的距离

3）我想点击按钮＆＃34;绘制地图＆＃34;使用AngularJS。

以下是我的代码。

＆＃13;
＆＃13; 
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;
		}
		
	});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

enter image description here

2 个答案:

答案 0 :(得分：1)

name属性应为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>

答案 1 :(得分：0)

for 1）你可以添加label =“X”

相关问题
最新问题