Cách sử dụng google map api

Để thực hiện các hình thức của Google bạn cần chế tạo 1 thông tin tài khoản mới(project service) trên https://console.developers.google.com.

Bạn đang xem: Cách sử dụng google map api

Service Accounts xác xắn đối tượng người tiêu dùng truy cập Google API’s bằng phương pháp áp dụng OAuth bên trên danh nghĩa là 1 vận dụng website rứa vị là 1 trong người tiêu dùng. Tức là nó sử dụng chứng chỉ thông tin tài khoản hình thức dịch vụ của vận dụng nhằm chứng thực.

Trước lúc tạo request truy vấn API, rất cần phải có 1 access token bằng phương pháp áp dụng những tài khoản hình thức đã có được chứng nhận. request này là POST request với những params như grant-type với JWT(JSON Web Token) đã đăng nhập bởi key.

Các loại tyêu thích số cung cấp thứ nhất là một trong jet-bearer (chỉ cần 1 access token mà lại ko đề nghị refresh token). Param thứ hai là JWT chứa đọc tin bảo đảm tài khoản trong chuỗi mã hóa được định dạng trước đựng title, tập các yêu cầu(clalặng set) cùng chữ ký kết. Tiêu đề có mang thuật toán signin được áp dụng trong Việc signing JWT, clayên ổn set chứa tương tác tin nhắn của thông tin tài khoản dịch vụ, phạm vi, thời gian quá hạn... Chữ cam kết là nhân tố bao gồm chữ ký kết của tiêu đề và claim set

Sau khi tạo request cho tới máy chủ ủy quyền, bọn họ nhận thấy một access token kéo dài tối thiểu là một giờ. Sử dụng access token này, chúng ta có thể truy cập vào Google APIs theo cách sau : thực hiện user’s credential, cách thức như hình sau đây :

*
2. Google Maps Overlays (Lớp phủ)

Lớp phủ(overlays) là các đối tượng người tiêu dùng trên bản đồ, được xác minh do tọa vĩ độ độ/ tởm độ.

Xem thêm: Hướng Dẫn Cách Kiểm Tra Web Viết Bằng Ngôn Ngữ Gì ? 7 Cách Kiểm Tra Website Viết Bằng Ngôn Ngữ Gì

Các các loại lớp đậy :

Marker : xác định một điểm trên bản đồ dùng hoặc lưu lại vị trí dựa vào vĩ độ và ghê độ, có thể được hiển thị bằng ibé (hình ảnh) cấu hình thiết lập của người dùng ví dụ như icon bên dưới đây:

Polyline : chuỗi các đường trực tiếp bên trên phiên bản thiết bị.

Polygon : chuỗi những đường thẳng bên trên phiên bản thiết bị với những kăn năn "closed" (đánh color cho 1 kân hận kín đáo các điểm)

Circle and Rectangle : mặt đường tròn với hình chữ nhật.

Info Windows : hiển thị ngôn từ trong một popup ballon sống phía bên trên của map.

Xem thêm: Hướng Dẫn Cách Bỏ Chặn Tin Nhắn Trên Messenger Điện Thoại, Máy Tính

Custom overlays

2.1. Add 1 marker

add marker vào maps bằng phương pháp áp dụng method setMap() :

var marker=new google.maps.Marker( position:myCenter, );marker.setMap(map);position : nên, lao lý tọa độ LatLng của điểm được ghi lại. (sinh sống đó là tọa độ của vươn lên là myCenter)2.2. Hiệu ứng mang lại Marker

var marker=new google.maps.Marker( position:myCenter, animation:google.maps.Animation.BOUNCE );marker.setMap(map);animation: phương thức hoạt động của ibé của điểm ghi lại. CÓ 2 biện pháp : DRAG (đứng yên), tỷ lệ thoát (xê dịch theo hành trình lên - xuống).2.3. Inhỏ thay thế sửa chữa đến Marker

var marker=new google.maps.Marker( position:myCenter, icon:"pinkball.png" );marker.setMap(map);icon(tùy chọn): hình hình ảnh tùy lựa chọn cơ mà bạn muốn hiển thị thay thế sửa chữa hình hình họa mang định. Dùng tùy lựa chọn này sửa chữa thay thế đến marker.setIcon(links mang đến hình hình ảnh trong thỏng mục), ví dụ cho icon:"pinkball.png" -> kết quả :

2.4. Polyline

Một Polyline là 1 trong những mặt đường được vẽ nhằm nối một loạt những tọa độ(các điểm chỉ định và hướng dẫn trước (ví dụ : lộ trình của 1 chuyến hành trình, 1 khu vực địa lý... )

Các ở trong tính của 1 Polyline :

path : dụng cụ ví dụ 1 số ít điểm (khiếp độ - vĩ độ) mang đến dòngstrokeMàu sắc : màu sắc mang lại cái (color định hình format: "#FFFFFF")strokeOpathành phố : độ mờ đục của dòng (là quý giá trong khoảng 0.0 với 1.0)strokeWeight : khẳng định phạm vi của chiếc (tính theo pixel)editable : khẳng định quyền chỉnh sửa của người tiêu dùng so với dòng (true / false)

// quan niệm 1 trip: stavanger-amsterdam-londonvar myTrip = ;var flightPath = new google.maps.Polyline( //xác định những vấn đề cần nối bên trên bạn dạng đồ gia dụng path:myTrip, // color đến chiếc : màu xanh da trời lục strokeColor:"#0000FF", // độ đậm : 0.8 strokeOpacity:0.8, // phạm vi line : 2px strokeWeight:2);-> kết quả :

2.5. Polygon

Polygon giống như nhỏng polyline cơ mà bao gồm thêm anh tài Quanh Vùng (khẳng định 1 tập đúng theo các điểm chế tạo thành 1 kăn năn kín)

Thuộc tính tựa như như polyline tuy nhiên có thêm 2 nằm trong tính sau:

fillmàu sắc : chỉ định màu sắc của khoanh vùng được xác định (màu sắc định hình : "#FFFFFF")fillOpathành phố : độ mờ đục của vùng khẳng định (giá trị trong vòng 0.0 -> 1.0)

var myTrip = ;var flightPath = new google.maps.Polygon( path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4);-> kết quả :

2.5. Circle

Các nằm trong tính :

center : xác minh trung trọng tâm của vòng tròn

radius : nửa đường kính của con đường tròn (mét)

strokemàu sắc : màu mang đến con đường viền (định dạng : "#FFFFFF")

strokeOpathành phố : độ mờ đục của mặt đường viền (quý hiếm trong khoảng 0.0 -> 1.0)

strokeWeight : độ rộng của mặt đường viền (px)

fillColor : chỉ định màu của khu vực vựcbên trong mặt đường tròn (màu định hình : "#FFFFFF")

fillOpathành phố : độ mờ đục của vùng xác định (giá trị trong khoảng 0.0 -> 1.0)

editable : xác định quyền chỉnh sửa của người dùng đối với cái (true / false)

var myCity = new google.maps.Circle( center:amsterdam, radius:40000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4);-> tác dụng :

2.6. InfoWindow

show 1 InfoWindow là 1 trong những đoạn text cho 1 marker:

var infowindow = new google.maps.InfoWindow( // ngôn từ của InfoWindow content:"Hello World!" );infowindow.open(map,marker);-> hiệu quả :


Chuyên mục: Marketing