Hướng dẫn javascript visualizer - trình hiển thị javascript

API JavaScript bản đồ cho phép bạn tùy chỉnh bản đồ với nội dung và hình ảnh của riêng bạn để hiển thị trên các trang web và thiết bị di động. Bản đồ API JavaScript có bốn loại bản đồ cơ bản (lộ trình, vệ tinh, lai và địa hình) mà bạn có thể sửa đổi bằng cách sử dụng các lớp và kiểu dáng, điều khiển và sự kiện, và các dịch vụ và thư viện khác nhau.

Nội dung chính Show

Sự tiếp kiến
Chào thế giới
Hãy thử mẫu
Tuyên bố ứng dụng của bạn là HTML5
Đang tải các bản đồ API JavaScript
Tải nội tuyến
Tải động
Tải động
Ngay cả trong ví dụ đơn giản này, có một vài điều cần lưu ý:
Tải đồng bộ API
Bản đồ các yếu tố DOM
Tùy chọn bản đồ
Mức thu phóng
Đối tượng bản đồ
Xử lý sự cố
Khóa API và lỗi thanh toán
Nếu mã của bạn không hoạt động:

Sự tiếp kiến

Tài liệu này được thiết kế cho những người quen thuộc với lập trình JavaScript và các khái niệm lập trình hướng đối tượng. Bạn cũng nên quen thuộc với Google Maps theo quan điểm của người dùng. Có nhiều hướng dẫn JavaScript có sẵn trên web.

Tài liệu khái niệm này được thiết kế để cho phép bạn nhanh chóng bắt đầu khám phá và phát triển các ứng dụng với API JavaScript bản đồ. Chúng tôi cũng xuất bản tham chiếu API JavaScript bản đồ.

Chào thế giới

Cách dễ nhất để bắt đầu tìm hiểu về API JavaScript bản đồ là xem một ví dụ đơn giản. Ví dụ sau đây hiển thị một bản đồ tập trung vào Sydney, New South Wales, Úc.

TYPEXTRIPT

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML


  
    Simple Map

Xem ví dụ

Hãy thử mẫu

Ngay cả trong ví dụ đơn giản này, có một vài điều cần lưu ý:

Chúng tôi tuyên bố ứng dụng là HTML5 bằng cách sử dụng khai báo

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

Chúng tôi tạo một phần tử

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

8 có tên "Bản đồ" để giữ bản đồ.

Chúng tôi xác định hàm JavaScript tạo bản đồ trong

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

Chúng tôi tải API JavaScript bản đồ bằng thẻ

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

Các bước này được giải thích dưới đây.

Tuyên bố ứng dụng của bạn là HTML5

Chúng tôi khuyên bạn nên khai báo một

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

1 thực sự trong ứng dụng web của bạn. Trong các ví dụ ở đây, chúng tôi đã tuyên bố các ứng dụng của mình là HTML5 bằng cách sử dụng HTML5

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

1 đơn giản như hình dưới đây:

Hầu hết các trình duyệt hiện tại sẽ hiển thị nội dung được khai báo với

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

1 này trong "Chế độ tiêu chuẩn", điều đó có nghĩa là ứng dụng của bạn phải tuân thủ trình duyệt chéo hơn.

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

1 cũng được thiết kế để suy giảm duyên dáng; Các trình duyệt không hiểu nó sẽ bỏ qua nó và sử dụng "chế độ kỳ quặc" để hiển thị nội dung của họ.

Lưu ý rằng một số CSS hoạt động trong chế độ Quirks không hợp lệ trong chế độ Tiêu chuẩn. Nói chung, tất cả các kích thước dựa trên phần trăm phải kế thừa từ các phần tử khối cha mẹ và nếu bất kỳ tổ tiên nào không chỉ định kích thước, chúng được cho là có kích thước ở mức 0 x 0 pixel. Vì lý do đó, chúng tôi bao gồm tuyên bố

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

5 sau đây:

Tuyên bố CSS này chỉ ra rằng thùng chứa bản đồ

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

6 (với ID

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

7) sẽ chiếm 100% chiều cao của thân HTML. Lưu ý rằng chúng tôi phải khai báo cụ thể các tỷ lệ phần trăm đó cho

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

8 và

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

Đang tải các bản đồ API JavaScript

API JavaScript bản đồ được tải bằng thẻ

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

0, có thể được thêm nội tuyến trong tệp HTML của bạn hoặc sử dụng tệp JavaScript riêng. Chúng tôi khuyên bạn nên xem xét cả hai phương pháp và chọn phương pháp phù hợp nhất cho cách thức cấu trúc mã trong dự án của bạn.

Tải nội tuyến

Để tải API JavaScript bản đồ nội tuyến trong tệp HTML, hãy thêm thẻ

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

0 như hiển thị bên dưới.

Tải động

Để tự động tải các bản đồ API JavaScript nội tuyến bằng cách sử dụng tệp JavaScript riêng biệt, hãy xem ví dụ bên dưới. Cách tiếp cận này cho phép bạn xử lý tất cả các mã của mình để làm việc với API từ một tệp


  
    Simple Map

2 riêng biệt và tương đương với việc thêm thẻ tập lệnh nội tuyến.

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;

// Attach your callback function to the `window` object
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);

Tải động


  
    Simple Map

2 riêng biệt và tương đương với việc thêm thẻ tập lệnh nội tuyến.

npm install @googlemaps/js-api-loader

Gói @googlemaps/js-api-loader có sẵn để tạo trải nghiệm tải động liền mạch hơn. Nó có thể được cài đặt thông qua NPM với các mục sau:

import { Loader } from "@googlemaps/js-api-loader"

Gói này có thể được nhập vào ứng dụng với:

TYPEXTRIPT

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

CSS

HTML

Xem ví dụ
Hãy thử mẫu

Ngay cả trong ví dụ đơn giản này, có một vài điều cần lưu ý:

Chúng tôi tuyên bố ứng dụng là HTML5 bằng cách sử dụng khai báo

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

Tải đồng bộ API

Trong thẻ

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

0 tải API JavaScript bản đồ, có thể bỏ qua thuộc tính

2 và tham số


  
    Simple Map

7. Điều này sẽ khiến việc tải API chặn cho đến khi API được tải xuống.

Điều này có thể sẽ làm chậm tải trang của bạn. Nhưng điều đó có nghĩa là bạn có thể viết các thẻ tập lệnh tiếp theo giả sử rằng API đã được tải.

Bản đồ các yếu tố DOM

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

Để bản đồ hiển thị trên một trang web, chúng tôi phải đặt chỗ cho nó. Thông thường, chúng tôi thực hiện điều này bằng cách tạo một phần tử

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

8 có tên và có được tham chiếu đến phần tử này trong mô hình đối tượng tài liệu của trình duyệt (DOM).

Trong ví dụ trên, chúng tôi đã sử dụng CSS để đặt chiều cao của DIV bản đồ thành "100%". Điều này sẽ mở rộng để phù hợp với kích thước trên thiết bị di động. Bạn có thể cần điều chỉnh các giá trị chiều rộng và chiều cao dựa trên màn hình và đệm của trình duyệt. Lưu ý rằng các div thường lấy chiều rộng của chúng từ phần tử chứa của chúng và các div trống thường có chiều cao 0. Vì lý do này, bạn phải luôn luôn đặt chiều cao trên

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

6 một cách rõ ràng.

Tùy chọn bản đồ

Có hai tùy chọn cần thiết cho mỗi bản đồ:

6 và

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

Mức thu phóng

Độ phân giải ban đầu để hiển thị bản đồ được đặt bởi thuộc tính

7, trong đó zoom

9 tương ứng với bản đồ của trái đất được phóng to hoàn toàn và các mức thu phóng lớn hơn thu phóng ở độ phân giải cao hơn.

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

Cung cấp một bản đồ của toàn bộ trái đất như một hình ảnh duy nhất sẽ yêu cầu một bản đồ to lớn hoặc một bản đồ nhỏ với độ phân giải rất thấp. Do đó, bản đồ hình ảnh trong Google Maps và API JavaScript bản đồ được chia thành bản đồ "Gạch" và "cấp độ zoom". Ở mức độ zoom thấp, một bộ gạch nhỏ có diện tích rộng; Ở mức độ zoom cao hơn, gạch có độ phân giải cao hơn và bao gồm một khu vực nhỏ hơn. Danh sách sau đây cho thấy mức độ chi tiết gần đúng mà bạn có thể mong đợi để thấy ở mỗi cấp độ zoom:

1: Thế giới
5: Landmass/lục địa
10: Thành phố
15: Đường phố
20: Tòa nhà

Ba hình ảnh sau đây phản ánh cùng một vị trí của Tokyo ở các cấp độ zoom 0, 7 và 18.

Hướng dẫn javascript visualizer - trình hiển thị javascript

Để biết thông tin về cách các bản đồ API JavaScript tải các gạch dựa trên mức thu phóng hiện tại, hãy xem Hướng dẫn về Tọa độ MAP và TILE.

Đối tượng bản đồ

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

Lớp JavaScript đại diện cho bản đồ là lớp

0. Đối tượng của lớp này xác định một bản đồ duy nhất trên một trang. .

Khi bạn tạo một thể hiện bản đồ mới, bạn chỉ định phần tử

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

6 HTML trong trang dưới dạng container cho bản đồ. Các nút HTML là trẻ em của đối tượng JavaScript

3 và chúng tôi có được tham chiếu đến phần tử này thông qua phương thức

Mã này xác định một biến (được đặt tên

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

7) và gán biến đó cho một đối tượng

0 mới. Hàm

7 được gọi là hàm tạo và định nghĩa của nó được hiển thị bên dưới:

Người xây dựng	Sự mô tả
8	Tạo một bản đồ mới bên trong thùng chứa HTML đã cho - thường là phần tử DIV - sử dụng bất kỳ tham số (tùy chọn) nào được truyền.

Xử lý sự cố

Khóa API và lỗi thanh toán

Trong một số trường hợp nhất định, một bản đồ tối hoặc hình ảnh xem đường phố 'tiêu cực', được ghi hình bằng văn bản "chỉ có mục đích phát triển", có thể được hiển thị. Hành vi này thường chỉ ra các vấn đề với khóa API hoặc thanh toán. Để sử dụng các sản phẩm nền tảng Google Maps, việc thanh toán phải được bật trên tài khoản của bạn và tất cả các yêu cầu phải bao gồm khóa API hợp lệ. Lưu lượng sau đây sẽ giúp khắc phục sự cố này:

Bạn đang sử dụng khóa API?

Tôi không chắc. Làm cách nào để kiểm tra xem tôi có đang sử dụng khóa API không?

Một khóa API được truyền dưới dạng tham số


  
    Simple Map

6 trong URL được sử dụng để tải API JavaScript bản đồ. Dưới đây là một vài tùy chọn để kiểm tra xem bạn có đang sử dụng khóa API không:

Sử dụng tiện ích mở rộng API Checker Chrome của Google Maps Maps. Điều này cho phép bạn xác định xem trang web của bạn có thực hiện đúng API bản đồ được cấp phép của Google hay không.
Nếu bạn đang sử dụng thư viện hoặc plugin để tải API JavaScript bản đồ, hãy kiểm tra cài đặt cho thư viện đó và tìm tùy chọn khóa API.
Kiểm tra lỗi trong trình duyệt của bạn. Nếu bạn thấy các tin nhắn sau, bạn không sử dụng chính xác khóa API của mình:

Google Maps JavaScript API Cảnh báo: Noapikeys
Google Maps JavaScript API Lỗi: ThiếuKeymaperror

Đối với các nhà phát triển web:

Nếu bạn có quyền truy cập vào mã nguồn của ứng dụng của mình, hãy tìm thẻ
0 được sử dụng để tải API JavaScript bản đồ. Khi tải API JavaScript bản đồ, thay thế
1 trong mã bên dưới bằng khóa API của bạn.
```
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
```
6
Kiểm tra lưu lượng mạng được tạo bởi trang web của bạn trong trình duyệt. Trong Chrome, điều này có thể được xem bằng cách sử dụng tab Network DevTools. Tại đây bạn sẽ thấy các yêu cầu mạng được thực hiện bởi trang web của bạn. Các yêu cầu được thực hiện bằng API JavaScript bản đồ sẽ nằm dưới đường dẫn
2. Tại đây bạn có thể xác nhận nếu các yêu cầu đang sử dụng tham số
```
  
    Simple Map
    

    
    
  
  
    

    
    
  
```
6. Có thể hữu ích để lọc lưu lượng mạng của bạn bằng
2 khi xem tab mạng.Network tab. Here you will see the network requests made by your website. Requests made using the Maps JavaScript API will be under the path
2. Here you can confirm if the requests are using the
```
  
    Simple Map
    

    
    
  
  
    

    
    
  
```
6 parameter. It may be helpful to filter your network traffic by
2 when viewing the Network tab.

Không, tôi không sử dụng khóa API.

Để nhận khóa API, nhấp vào nút bên dưới. Nếu bạn không thấy thiết lập có hướng dẫn, hãy làm theo các hướng dẫn đầy đủ khi bắt đầu với nền tảng Google Maps. Bắt đầu
Get Started

Vâng, tôi đang sử dụng khóa API.

Tuyệt quá! Hãy để tiếp tục và kiểm tra xem một tài khoản thanh toán có được đính kèm với dự án của bạn không.

Là một tài khoản thanh toán được đính kèm với dự án của bạn?

Tôi không chắc. Làm thế nào tôi có thể kiểm tra xem tài khoản thanh toán có được đính kèm với dự án của tôi không?

Truy cập trang thanh toán trong bảng điều khiển Google Cloud và chọn dự án theo đó khóa API của bạn được tạo. Để xác nhận khóa được liên kết với dự án:

Chuyển đến phần Thông tin đăng nhập, có thể được truy cập từ thanh bên trái trong nền tảng Google Maps> Thông tin đăng nhập.Credentials section, which can be accessed from the left side bar under Google Maps Platform > Credentials.
Kiểm tra xem khóa API bạn hiện đang sử dụng trên trang web của bạn có được liệt kê không. Nếu đó không phải là trường hợp, hãy chuyển sang một dự án khác và kiểm tra thông tin đăng nhập ở đó.
Nếu bạn không thể xác định vị trí dự án cho khóa API của mình, bạn có thể bị mất quyền truy cập vào dự án này. Hỏi người khác trong tổ chức của bạn để được giúp đỡ. Nếu dự án ban đầu không thể được định vị, bạn nên:
1. Tạo một dự án mới. Điều này có thể được thực hiện bằng cách chọn dự án mới từ danh sách dự án hoặc bằng cách chọn Tạo dự án thông qua trang Trình quản lý tài nguyên.New Project from the projects list, or by selecting Create Project via the Resource Manager page.
2. Tạo khóa API mới. Điều này có thể được thực hiện trên trang thông tin đăng nhập. Khi đó nhấp vào Tạo thông tin đăng nhập và sau đó chọn khóa API.Credentials page. Once there click Create credentials and then select API key.

Khi bạn đã định vị dự án của mình trong bảng điều khiển đám mây, hãy kiểm tra xem tài khoản thanh toán có được đính kèm bằng cách điều hướng đến phần thanh toán trong menu bên trái không.

Không, một tài khoản thanh toán không được đính kèm với dự án của tôi.

Truy cập trang Bật thanh toán trong bảng điều khiển đám mây và thêm tài khoản thanh toán vào dự án của bạn. Để biết thêm thông tin, hãy xem Bắt đầu với nền tảng Google Maps.

Có, một tài khoản thanh toán được đính kèm với dự án của tôi.

Tuyệt quá! Hãy để đảm bảo phương thức thanh toán được cung cấp là hợp lệ.

Phương thức thanh toán được cung cấp không còn hợp lệ (ví dụ: thẻ tín dụng đã hết hạn)?

Bạn có thể thêm, xóa hoặc cập nhật phương thức thanh toán trong bảng điều khiển đám mây.

Có giới hạn hàng ngày tự áp đặt trên API không?

Nếu bạn đã đặt giới hạn hàng ngày cho bất kỳ API nào của bạn, điều này là phổ biến để ngăn chặn sự gia tăng bất ngờ, bạn có thể giải quyết điều này bằng cách tăng giới hạn hàng ngày của bạn.

Bạn có thể kiểm tra giới hạn hàng ngày của mình bằng cách truy cập bảng điều khiển API & Services trong bảng điều khiển đám mây. Một khi ở đó:

Chọn một dự án nếu được nhắc.
Chọn API từ danh sách, sau đó nhấp vào tab Hạn ngạch.Quotas tab.

Khóa API của bạn có giới hạn địa chỉ IP không?

Các khóa API có hạn chế địa chỉ IP chỉ có thể được sử dụng với các dịch vụ web được sử dụng để sử dụng từ phía máy chủ (chẳng hạn như API mã hóa địa lý và API dịch vụ web khác). Hầu hết các dịch vụ web này có các dịch vụ tương đương trong API JavaScript bản đồ (ví dụ: xem dịch vụ mã hóa địa lý). Để sử dụng các dịch vụ phía máy khách API JavaScript, bạn sẽ cần tạo khóa API riêng biệt có thể được bảo mật bằng hạn chế giới thiệu HTTP (xem GET, Thêm và hạn chế khóa API).IP addresses restriction can only be used with web services that are intended for use from the server side (such as the Geocoding API and other Web Service APIs). Most of these web services have equivalent services within the Maps JavaScript API (for example, see the Geocoding Service). To use the Maps JavaScript API client side services, you will need to create a separate API key which can be secured with an HTTP referrers restriction (see Get, add, and restrict an API key).

Nếu mã của bạn không hoạt động:

Để giúp bạn có được mã bản đồ và chạy, Brendan Kenny và Mano đánh dấu chỉ ra một số lỗi phổ biến và cách khắc phục chúng trong video này.

Tìm kiếm lỗi chính tả. Hãy nhớ rằng JavaScript là ngôn ngữ nhạy cảm trường hợp.
Kiểm tra những điều cơ bản - một số vấn đề phổ biến nhất xảy ra với việc tạo bản đồ ban đầu. Như là:
- Xác nhận rằng bạn đã chỉ định các thuộc tính
  7 và
  6 trong các tùy chọn bản đồ của bạn.
- Đảm bảo rằng bạn đã khai báo một phần tử div trong đó bản đồ sẽ xuất hiện trên màn hình.
- Đảm bảo rằng phần tử DIV cho bản đồ có chiều cao. Theo mặc định, các phần tử div được tạo với chiều cao 0 và do đó vô hình.
Tham khảo các ví dụ của chúng tôi để thực hiện tham khảo.
Sử dụng trình gỡ lỗi JavaScript để giúp xác định các vấn đề, như loại có sẵn trong các công cụ của nhà phát triển Chrome. Bắt đầu bằng cách nhìn vào bảng điều khiển JavaScript cho các lỗi.
Đăng câu hỏi để xếp chồng tràn. Hướng dẫn về cách đăng các câu hỏi tuyệt vời có sẵn trên trang hỗ trợ.

Hướng dẫn javascript visualizer - trình hiển thị javascript

Sự tiếp kiến

Chào thế giới

TYPEXTRIPT

JavaScript

CSS

HTML

Hãy thử mẫu

Tuyên bố ứng dụng của bạn là HTML5

Đang tải các bản đồ API JavaScript

Tải nội tuyến

Tải động

Tải động

TYPEXTRIPT

JavaScript

CSS

Ngay cả trong ví dụ đơn giản này, có một vài điều cần lưu ý:

Tải đồng bộ API

Bản đồ các yếu tố DOM

Tùy chọn bản đồ

Mức thu phóng

Đối tượng bản đồ

Xử lý sự cố

Khóa API và lỗi thanh toán

Bạn đang sử dụng khóa API?

Tôi không chắc. Làm cách nào để kiểm tra xem tôi có đang sử dụng khóa API không?

Đối với các nhà phát triển web:

Không, tôi không sử dụng khóa API.

Vâng, tôi đang sử dụng khóa API.

Là một tài khoản thanh toán được đính kèm với dự án của bạn?

Tôi không chắc. Làm thế nào tôi có thể kiểm tra xem tài khoản thanh toán có được đính kèm với dự án của tôi không?

Không, một tài khoản thanh toán không được đính kèm với dự án của tôi.

Có, một tài khoản thanh toán được đính kèm với dự án của tôi.

Phương thức thanh toán được cung cấp không còn hợp lệ (ví dụ: thẻ tín dụng đã hết hạn)?

Có giới hạn hàng ngày tự áp đặt trên API không?

Khóa API của bạn có giới hạn địa chỉ IP không?

Nếu mã của bạn không hoạt động:

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội