如何在 ng 映射标记(角度）中使用自定义图标

How can i use custom icon in ng-map marker(angular)?

本文关键字：图标 自定义 角度 ng 映射      更新时间：2023-09-26

我有包含纬度和经度的商店列表，我有特定的用户纬度和经度。

当用户单击地图按钮时，地图中会显示两个标记，用于标识用户和商店位置

如何更改两个标记图标而不是默认标记 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 ;
	    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.viewMap = false;
      $scope.updateMap = function(dealer) {
        $scope.lat1 = dealer.S_Latitude;
    	  $scope.lon1 = dealer.S_Longitude;
    	  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: "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: ""
		}
    ]
 
  
  
	}
)
<!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>
				{{dealer.S_Email_id}}<br>
				{{dealer.S_clocation}}
        
        <input type="button" name="map" id="map" value="map" ng-click="updateMap(dealer);"><br><br>
			</div>
			</div>
			<br><br><br>
  </div>
</body>
</html>

演示

不要使用 custom-marker 指令。它会扼杀您对任何大量标记（例如 200+）的性能。而是使用标准标记的"icon"属性，如下所示：

<marker id="L: {{loc.position[0]}}, {{loc.position[1]}}" position="{{loc.position}}" icon="{ url:'/assets/images/deal-indicator.png', scaledSize:[32,40], origin: [0,0], anchor: [16,40] }">

标记指令只是Google Maps API v3标准"标记"的包装器，因此在使用ng-map时可以访问所有标准标记属性。

该图标是一个 Javascript 对象，属性如下（来自文档）：

性能

锚 |类型：点

锚

定图像以对应于 标记在地图上的位置。默认情况下，定位点位于 沿图像底部的中心点。

产地 |类型：点

图像在精灵中的位置（如果有）。默认情况下， 原点位于图像的左上角 （0， 0）。

图标也可以通过使用标记的"setIcon"方法以编程方式设置，例如：

myMarker.setIcon('/assets/images/deal-indicator-selected.png');

或者，先构造一个图标对象并将其设置为标记：

var customIcon = {
    url: "/images/my-marker.png",
    scaledSize: new google.maps.Size(32, 40),
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(16, 40)
};
myMarker.setIcon(customIcon);

请阅读有关ng-maps自定义标记的文档：https://ngmap.github.io/#/!custom-marker.html

<custom-marker id="usa" position="united state of america" on-click="ifNeeded()"></custom-marker>

编辑：下面的完整代码;

<ng-map zoom="12" center="{{lat}}, {{lon}}">
      <directions
      draggable="true"
      panel="directions-panel"
      travel-mode="DRIVING"
      origin="{{lat}}, {{lon}}"
      destination="{{lat1}}, {{lon1}}">
    </directions>
    <custom-marker id="can" position="canada" on-click="click()">
        <div>
            <b>Hi, USA</b>
            <img src="http://icons.iconarchive.com/icons/custom-icon-design/2014-world-cup-flags/32/USA-icon.png" />
        </div>
    </custom-marker>
</ng-map>
相关文章：