Thêm một điểm đánh dấu trong chương trình của bạn là rất dễ dàng. Bạn chỉ có thể thêm mã này:
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
Các trường sau đặc biệt quan trọng và thường được đặt khi bạn tạo điểm đánh dấu:
position(bắt buộc) chỉ định LatLng xác định vị trí ban đầu của điểm đánh dấu. Một cách để lấy LatLng là sử dụng dịch vụ Mã hóa địa lý .map(tùy chọn) chỉ định Bản đồ để đặt điểm đánh dấu. Nếu bạn không chỉ định bản đồ khi xây dựng điểm đánh dấu, điểm đánh dấu được tạo nhưng không được đính kèm (hoặc hiển thị trên) bản đồ. Bạn có thể thêm điểm đánh dấu sau bằng cách gọi setMap()phương thức đánh dấu .
Lưu ý , trong ví dụ, trường tiêu đề đặt tiêu đề của người đánh dấu sẽ xuất hiện dưới dạng một chú giải công cụ.
Bạn có thể tham khảo thông tin về api của Google tại đây .
Đây là một ví dụ hoàn chỉnh để đặt một điểm đánh dấu trong bản đồ. Hãy cẩn thận, bạn phải thay thế YOUR_API_KEYbằng khóa Google API của mình :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Bây giờ, nếu bạn muốn vẽ các điểm đánh dấu của một mảng trong bản đồ, bạn nên làm như thế này:
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function initMap() {
var myLatLng = {lat: -33.90, lng: 151.16};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});
var count;
for (count = 0; count < locations.length; count++) {
new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map,
title: locations[count][0]
});
}
}
Ví dụ này cho tôi kết quả như sau:
Bạn cũng có thể, thêm một thông tinWindow trong pin của bạn. Bạn chỉ cần mã này:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});
marker.info = new google.maps.InfoWindow({
content: 'Hello World!'
});
Bạn có thể có tài liệu của Google về thông tin tại đây .
Bây giờ, chúng ta có thể mở thông tinWindow khi điểm đánh dấu là "clik" như thế này:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});
marker.info = new google.maps.InfoWindow({
content: locations [count][0]
});
google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});
Lưu ý , bạn có thể có một số tài liệu về Listener đây trong nhà phát triển google.
Và cuối cùng, chúng ta có thể vẽ một thông tinWindow trong một điểm đánh dấu nếu người dùng nhấp vào nó. Đây là mã hoàn chỉnh của tôi:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
// When the user clicks the marker, an info window opens.
function initMap() {
var myLatLng = {lat: -33.90, lng: 151.16};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});
var count=0;
for (count = 0; count < locations.length; count++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});
marker.info = new google.maps.InfoWindow({
content: locations [count][0]
});
google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Thông thường, bạn nên có kết quả này:
