Demo Google Map Inspect a polyline
RUN
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Complex Polylines</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script> <script> // Đườn thẳng var poly; // Bản đồ var map; function initialize() { // Thông số tạo bảng đồ var mapOptions = { zoom: 7, center: new google.maps.LatLng(41.879535, -87.624333) }; // Tạo bản đồ map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Thông số tạo Polyline // chưa xác định tạo độ các điểm vẽ var polyOptions = { strokeColor: '#000000', strokeOpacity: 1.0, strokeWeight: 3 }; // Tạo Poluline mới poly = new google.maps.Polyline(polyOptions); // Và gắn vào bản đồ poly.setMap(map); // Khi click vào bản đồ thì gọi đến hàm addLatLng google.maps.event.addListener(map, 'click', addLatLng); } // Làm xử lý function addLatLng(event) { // Lấy danh sách tọa độ hiện tại của đường thẳng var path = poly.getPath(); // Thêm một tọa độ mới (vừa click) vào danh sách path.push(event.latLng); // Tạo marker var marker = new google.maps.Marker({ position: event.latLng, title: '#' + path.getLength(), map: map }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
PHÓNG TO