今天繼續來介紹,如何幫 Marker 做點美化~
除了在 marker icon屬性設定,可以客制自己獨特的 icon 圖案:
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var Marker = new google.maps.Marker({
position: {lat: 23.5, lng: 121},
map: map,
icon: image
});
也可以利用 marker label
來點綴一下原始的 marker,
而這也是今天我想介紹的主題:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Labels</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 80%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=PutKeyHere"></script>
<script>
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
function initialize() {
var taiwan = { lat: 23.5, lng: 121 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: taiwan
});
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Add a marker at the center of the map.
addMarker(taiwan, map);
}
// Adds a marker to the map.
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
function initialize() {
var taiwan = { lat: 23.5, lng: 121 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: taiwan
});
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Add a marker at the center of the map.
addMarker(taiwan, map);
}
我們先產生出一組字串 labels
,
建立好地圖後,對地圖設定一個事件觸發:click 後會觸發 addMarker 的函式,
再來看看 addMarker 做了什麼:
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
map: map
});
}
主要就是生成一個一個 marker 在地圖上,
但裡面有個設定跟今天介紹的 marker label 有關,
在 marker 的設定中有個 label 的屬性,label: labels[labelIndex++ % labels.length
這裡去抓 labels字串中第幾位把對應到的字母放進 marker 裏頭,
1 % 26 餘數就是為 1,所以我們得到 B 字母,依此類推。
這樣我們就完成了在地圖上任意點擊產生的 marker 都能依序放上不同的字母囉!
今天,你把玩 Google Map 了嗎?:)
參考文件:
Google map 官方文件