Làm cách nào để thêm html vào điểm đánh dấu agm trong góc 2?

Tôi cần một cách để tùy chỉnh điểm đánh dấu bản đồ trong Angular 2 bằng bản đồ agm. Trong một ứng dụng theo dõi xe tôi phải hiển thị tình trạng xe hiện tại thông qua agm-marker trong thành phần theo dõi trực tiếp. Tôi cần để hiển thị các điểm đánh dấu trong ba màu sắc khác nhau (nói màu xanh lá cây để chạy màu đỏ cho dừng lại và màu vàng cho nhàn rỗi) và tôi cũng cần phải hiển thị các phương hướng của chiếc xe đi du lịch hiện nay.Làm cách nào để thêm html vào điểm đánh dấu agm trong góc 2?

Tôi đã tìm kiếm nhiều nơi, nhưng chỉ tìm thấy các biểu tượng có thể được bổ sung vào các điểm đánh dấu và tôi đã thêm biểu tượng sử dụng iconUrl như,

<agm-map> 
    <agm-marker class="mapMarker" *ngFor="let device of devices;" [latitude]="device.latitude" [longitude]="device.longitude" [iconUrl]="'/src/assets/arrow2.png'" [label]="device.name"> 
    </agm-marker> 
</agm-map>

Và đầu ra của tôi là như thế,

Vì điều này có vẻ khó xử hơn, vui lòng giúp tôi hiển thị HTML, thay cho biểu tượng đó trên điểm đánh dấu.

Tôi đang cần đầu ra chính xác như trong hình bên dưới (Marker cùng với nhãn html cho biết số xe cụ thể).

Nguồn

2017-10-21 Mani Raj

Hãy xem [thư viện này] (https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel) – MrUpsidown

Bạn đã thử thư viện được đề cập trước đó chưa? Nếu bạn vẫn còn gặp vấn đề xin vui lòng gửi mã mẫu để tái tạo vấn đề của bạn – henrisycip

Một khi tôi đã cố gắng để thay đổi phong cách đánh dấu, sau khi số liệu ràng buộc vào bản đồ. Nhưng nó không được cho phép bởi sự nông cạn. Dù sao sau giải pháp đã thành công cho tôi. Vì tôi tin rằng dịch vụ dữ liệu của bạn có thể xác định hướng của xe.

Vì vậy, bạn cần có loại đối tượng dữ liệu JSON sau đây để tạo danh sách điểm đánh dấu.

[ 
    { 
     "latitude": 51.5238224, 
     "longitude": -0.2485759, 
     "markerUrl": "/assets/images/Map/20-red-icon.svg" 
    }, 
    { 
     "latitude": 51.238224, 
     "longitude": -0.2485759, 
     "markerUrl": "/assets/images/Map/30-green-icon.svg" 
    }, 
    , 
    { 
     "latitude": 51.4238224, 
     "longitude": -0.2485759, 
     "markerUrl": "/assets/images/Map/30-yellow-icon.svg" 
    } 
]

Bạn nên có nhiều biểu tượng có thể xác định hướng của phương tiện và trạng thái của xe.

Ex:

xe chạy đến tên biểu tượng phía bắc "0-xanh-icon.svg"
xe chạy đến tên biểu tượng tây "270-xanh-icon.svg"
xe chạy đến phía tây bắc tên biểu tượng "315-xanh-icon.svg"
xe ngừng và hướng đến phía tây nam tên biểu tượng "225-đỏ-icon.svg"

như thế này, bạn phải có danh sách các biểu tượng cho từng trạng thái và hướng của phương tiện. Url đánh dấu phải tự sát bởi dữ liệu mà bạn đang nhận được từ dịch vụ.

Nguồn

2017-11-03 14:35:14

Tôi không biết agm và góc cạnh, nhưng với các công cụ chuẩn Html/js bạn có thể làm điều đó tương đối đơn giản.

1.) Nhận 2 toạ độ từ xe trong thư mục lái xe. Sau đó sử dụng khả năng hiển thị mũi tên dọc theo một đường dẫn, vì vậy 2.) Thiết lập đường dẫn (từ các coords đã cho) bằng mũi tên và ẩn đường dẫn sao cho chỉ mũi tên hiển thị. 3.) Thiết lập một điểm đánh dấu có nhãn gián tiếp (có bù đắp) cho điều phối đầu tiên và không hiển thị điểm đánh dấu.

Đính kèm một ví dụ cho một chiếc xe. Có lẽ bạn có thể sử dụng nó hoặc một phần của nó. Chúc may mắn, Reinhard

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Simple Polylines</title> 
 
    <style> 
 
     #map {height: 100%;} 
 
     html, body {height: 100%;} 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    <script> 
 

 
    function initMap() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 7, 
 
      center: {lat: 18.1, lng: 79.1}, 
 
      mapTypeId: 'terrain' 
 
     }); 
 

 
\t \t ///// Simple example for one vehicle ////// 
 
\t \t //define the arrow you will display 
 
\t \t var arrowGreen = { 
 
\t \t \t path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
 
\t \t \t fillColor: 'green', 
 
\t \t \t fillOpacity: 0.8, 
 
\t \t }; 
 
\t \t //set two points in driving direction of vehicle 
 
\t \t var dirCoordinates = [ 
 
      {lat: 18.0935, lng: 79.0741}, 
 
      {lat: 18.0936, lng: 79.0742}, 
 
     ]; 
 
     //define a poly with arrow icon (which is displayed in driving directory) 
 
\t \t var poly = new google.maps.Polyline({ 
 
      path: dirCoordinates, 
 
      strokeColor: 'green', 
 
      strokeOpacity: 0, 
 
      strokeWeight: 6, 
 
\t \t map: map 
 
\t \t }); 
 
     poly.setOptions({icons: [{icon: arrowGreen, offset: '0'}]}); 
 
\t \t //set the text as marker label without displayinge the marker 
 
\t \t var m = new google.maps.Marker({ 
 
\t \t position: new google.maps.LatLng(dirCoordinates[0]), 
 
\t \t label: { 
 
\t \t \t color: 'black', 
 
\t \t \t fontWeight: 'bold', 
 
\t \t \t text: 'TN28 AF 1416', 
 
\t \t \t }, 
 
\t \t icon: { 
 
\t \t \t url: 'none_marker.png', 
 
\t \t \t anchor: new google.maps.Point(10, -25), 
 
\t \t }, 
 
\t \t \t map: map 
 
\t \t }); 
 

 
\t \t //..... 
 
\t \t // ..more vehicles 
 
\t } 
 
    </script> 
 
\t <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 
 
    </body> 
 
</html>

Nguồn

2017-11-04 21:06:53 ReFran

Cảm ơn, Nhưng tôi đang cần đầu ra dưới dạng bản ghi .. –

Tôi có một cách giải quyết mà bạn có thể sử dụng trong trường hợp bạn không tìm thấy một giải pháp tốt hơn:

Tại sao bạn không tạo ra một dấu hiệu mới hình ảnh, với nền trong suốt và lề dưới? Và bạn có thể sử dụng cùng mã bạn đã đăng trong câu hỏi.

Phóng đại dụ https://imgur.com/NLyxyTB.png

Nguồn

2017-11-09 00:01:39 Falci

Đây không phải là một vấn đề của đại hội cổ đông, đó là một vấn đề của bản đồ google API, mà không cho phép bạn sử dụng HTML cho điểm đánh dấu, vì vậy chỉ hình ảnh. :(Có một số cách giải quyết để tạo các dấu HTML tùy chỉnh như that, nhưng đáng tiếc là các lớp tùy chỉnh không được AGM hỗ trợ (ticket).Vì vậy, nếu bạn thực sự cần điều này, bạn sẽ phải triển khai đánh dấu tùy chỉnh một mình, sử dụng các lớp phủ tùy chỉnh của google mà không cần AGM.

Nguồn

2017-12-18 07:46:40

Làm cách nào để thêm html vào điểm đánh dấu agm trong góc 2?

Trả lời

Các vấn đề liên quan