Mã nguồn theo dõi phương tiện của Google Maps JavaScript
|
Các bài báo về dịch vụ chia sẻ chuyến đi đã làm lu mờ mọi blog công nghệ trên internet. nhưng hãy thử tìm kiếm nhanh về công nghệ đằng sau các ứng dụng dành cho thiết bị di động này. Nguồn cấp dữ liệu RSS của Techcrunch về dịch vụ chia sẻ chuyến đi dường như chỉ tập trung vào các khía cạnh kinh doanh. Mặc dù khía cạnh kinh doanh có thể thú vị, nhưng về công nghệ thì sao? Show
Đây là nơi định vị địa lý, Internet vạn vật (IoT) và thời gian thực gặp nhau Hãy tưởng tượng bạn cần xây dựng một giải pháp vận chuyển. Bạn sẽ quản lý thông tin liên lạc của hàng ngàn thiết bị như thế nào? . Hãy để PubNub lo phần đó. Thay vào đó, hãy tập trung vào việc cứu thế giới giao thông vận tải Hướng dẫn tổng quanTất cả các mã nguồn cho dự án có sẵn ở đây để tải về. Trong phần trước, chúng ta đã bắt đầu với việc phát dữ liệu vị trí địa lý bằng dịch vụ vị trí HTML5. Chúng tôi cũng khuyên bạn nên kiểm tra điều đó Bài viết này sẽ tập trung vào việc nhận và hiển thị dữ liệu vị trí địa lý theo thời gian thực bằng API Google Maps. Bạn cũng sẽ học cách tạo đường bay, là một đường vẽ trên bản đồ. Mục nhập này tập trung vào việc triển khai HTML5. Ghi chú. có các giải pháp chuyển đổi ứng dụng web của bạn thành ứng dụng dành cho thiết bị di động Bạn đã sẵn sàng kết nối thế giới với phạm vi từ bản đồ đến Internet vạn vật chưa? Thiết lập thông tin cơ bảnChỉ có hai phụ thuộc đang được sử dụng
Google Maps tương tự như các thao tác DOM giống như canvas khác. Bạn tạo chiều cao cho vùng chứa, đặt id cho vùng chứa, sau đó thêm hình ảnh vào đối tượng được khởi tạo. Đối với ứng dụng Google Maps đơn giản, hãy xem Nếu bạn hoàn thành ứng dụng đó, bạn sẽ có một bản đồ tập trung vào Sydney Úc. Tôi khuyên bạn nên sử dụng phiên bản tập lệnh này để thử nghiệm. Nó không yêu cầu khóa API Khóa API dành cho ứng dụng để Google có thể theo dõi việc sử dụng Để chạy ứng dụng của bạn, bạn có thể sử dụng. Bạn nên đặt vị trí mặc định cho ứng dụng của mình. Làm thế nào về bạn sử dụng vị trí của riêng bạn? . Điều này có nghĩa là các trình duyệt hiện đại có thể tìm thấy vị trí của bạn theo địa chỉ IP của bạn. Xem liên kết này để biết thông tin chi tiết. Đây là đoạn mã cơ bản sẽ hiển thị tọa độ của bạn trong bảng điều khiển dành cho nhà phát triển của trình duyệt của bạn API bản đồ GoogleBây giờ bạn đã tìm thấy vị trí của mình, đã đến lúc thêm chức năng bản đồ. Trong “gmapExample. html” một thẻ phong cách đã được thêm vào. Nó đặt chiều cao của canvas. Tải gmapExample. html ở đây Một div được thêm vào phần thân với id là “map-canvas”. Điều này cho phép bạn hiển thị trong div đó Điều này có vẻ rất giống với ứng dụng được đề cập trước đó trong mục blog. Tiếp theo, bạn cần thêm một số chức năng thời gian thực. Tích hợp PubNub Tạo một hàm bao bọc các phương thức PubNub Tiếp theo, hãy khởi tạo PubNub. Để nhận khóa pub/sub duy nhất của bạn, trước tiên bạn cần phải. Sau khi đăng ký, bạn có thể nhận các khóa PubNub duy nhất của mình trong Trang tổng quan dành cho nhà phát triển PubNub. Cấp Hộp cát miễn phí của chúng tôi sẽ cung cấp cho bạn tất cả băng thông bạn cần để xây dựng và thử nghiệm ứng dụng nhắn tin của mình bằng API nhắn tin trên web Đăng ký kênh “mymaps” và lắng nghe thông tin tọa độ Quay lại câu lệnh “nếu” ban đầu. Đảm bảo gọi phương thức Sử dụng phần phát sóng của ứng dụng mẫu để gửi tọa độ Bạn sẽ có thể nghe thông tin tọa độ trong bảng điều khiển Di chuyển bản đồPhần tiếp theo liên quan đến việc đặt bản đồ vào giữa và di chuyển với thông tin vị trí được gửi qua PubNub. Trong quá trình khởi tạo bản đồ, bạn nên căn giữa bản đồ của mình trên các biến “lat” và “lng”. Sau đó đặt một điểm đánh dấu ở cùng một vị trí Tạo phương thức “vẽ lại”, phương thức này di chuyển bản đồ Thêm “vẽ lại” vào danh sách tác vụ khi nhận được tin nhắn đường bay. Theo dõi nơi bạn đã đếnGiả sử bạn muốn theo dõi nơi bạn đã đến. Đây chỉ đơn giản là một vấn đề của. Khởi tạo một mảng để giữ tọa độ của bạn Sau đó đẩy tọa độ mỗi khi nhận được tin nhắn. Thêm chức năng này vào phương thức “vẽ lại” Ở đó bạn có nó. Bây giờ bạn có thể theo dõi thông tin vị trí được gửi qua kênh mymaps. Nó cũng sẽ vẽ một đường để chỉ ra vị trí của điểm đánh dấu. Khả năng là vô hạn với định vị địa lý và PubNub watchPosition() là một phương thức định vị địa lý, giúp theo dõi/tìm nạp dữ liệu vị trí người dùng mới. Điều này sẽ hữu ích cho việc theo dõi thông tin vị trí của người dùng trong thời gian thực tệp HTML
Chúng tôi cũng có một nút dừng được thêm vào chỉ mục của chúng tôi. html, khi người dùng nhấp vào nút đó, chúng tôi gọi phương thức clearWatch() của API định vị địa lý và yêu cầu phương thức watchPosition() ngừng theo dõi vị trí của người dùng Video hướng dẫn. Theo dõi vị trí theo thời gian thực – Google Maps. HTML5Liên kết YouTube. https. //www. youtube. com/watch?v=qYFkPFtfgdI [Xem Video Ở Toàn Màn Hình. ]
Mã nguồn. Tệp JavaScript đầy đủmySript. js var watchID = null;
$(document).ready(function(){
var optn = {
enableHighAccuracy: true,
timeout: Infinity,
maximumAge: 0
};
if( navigator.geolocation )
navigator.geolocation.watchPosition(success, fail, optn);
else
$("p").html("HTML5 Not Supported");
$("button").click(function(){
if(watchID)
navigator.geolocation.clearWatch(watchID);
watchID = null;
return false;
});
});
function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var mapOtn={
zoom:10,
center:googleLatLng,
mapTypeId:google.maps.MapTypeId.ROAD
};
var Pmap=document.getElementById("map");
var map=new google.maps.Map(Pmap, mapOtn);
addMarker(map, googleLatLng, "Technotip.com",
"SATISH B
About Me:https://technotip.com/about/");
}
function addMarker(map, googleLatLng, title, content){
var markerOptn={
position:googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
};
var marker=new google.maps.Marker(markerOptn);
var infoWindow=new google.maps.InfoWindow({ content: content,
position: googleLatLng});
google.maps.event.addListener(marker, "click", function(){
infoWindow.open(map);
});
}
function fail(error)
{
var errorType={
0:"Unknown Error",
1:"Permission denied by the user",
2:"Position of the user not available",
3:"Request timed out"
};
var errMsg = errorType[error.code];
if(error.code == 0 || error.code == 2){
errMsg = errMsg+" - "+error.message;
}
$("p").html(errMsg);
}
Bạn có thể tích hợp tính năng MAP vào ứng dụng hiện tại của mình và phát hành mô-đun này cho người dùng của mình và gây ấn tượng với họ bằng cách cho biết vị trí của họ hoặc bạn có thể chỉ cho những người dùng khác gần đó biết vị trí của họ, điều này sẽ khiến một số người ngạc nhiên về cách bạn có thể biết về người sống gần đó. -) Ghi nhớ vị trí. hợp âm. độ chính xác, trả về giá trị độ chính xác tính bằng mét? học tập vui vẻ
Bài viết liên quan
Tôi có thể sử dụng API Google Maps miễn phí không?Tất cả các yêu cầu API nhúng trên Maps đều có sẵn miễn phí với mức sử dụng không giới hạn .
Làm cách nào để có được vị trí hiện tại bằng API Google Map JavaScript?Nhận vị trí hiện tại của người dùng trên Google Maps JavaScript . Tạo khóa API từ Google Cloud Platform mà bạn sẽ cần để truy cập API Google Maps. . Thay thế khóa API của bạn bên trong thẻ tập lệnh JavaScript của Google Maps ở cuối mã HTML bên dưới Xác định phần tử div với ID của bản đồ Tôi có thể theo dõi xe của mình trong thời gian thực không?Cách tốt nhất để theo dõi ô tô là sử dụng thiết bị theo dõi GPS . Thiết bị theo dõi GPS là thiết bị nhỏ, di động cho phép chủ sở hữu ô tô giám sát và định vị ô tô của họ khi cần. Chúng cũng có khả năng cung cấp dữ liệu vị trí, tốc độ và hướng tức thì.
Công cụ hạm đội của Google là gì?Công cụ Hạm đội API Chuyến đi và Giao hàng theo yêu cầu cho phép bạn quản lý các chuyến đi và trạng thái phương tiện cho các ứng dụng Chuyến đi và Tiến độ đặt hàng của bạn . Nó xử lý các giao dịch giữa SDK trình điều khiển, SDK người tiêu dùng và dịch vụ phụ trợ của bạn -- dịch vụ này có thể giao tiếp với Fleet Engine bằng cách thực hiện lệnh gọi gRPC hoặc REST. |
