Map plugin 文件

簡易使用google map api且不依賴jQuery

目錄

引入

<!-- map plugin -->
<script src="<?php echo $http_url_link;?>public/js/map_plugin.js" async></script>

<!---google map api---->
<script src="<?php echo $http_url_link;?>public/js/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo $index_web_mapkey;?>&v=weekly" defer></script>

快速使用

※請在onload之後實體化

// 標記資料
var markers = [{
    position: [24.1893376,120.6616064],
    icon: './images/marker/main.png',
    title:'本館位置',
		animation: 'BOUNCE',
	  event: {
			creared() {
				// 標記建立後 do somethings...
		  }
			click() {
				// 標記點擊事件 do somethings...
			}
		}
}, {
    position: [24.1893376,120.6616064],
    icon: "./images/marker/current.png",
    title: '大雅公園',
    animation: 'DROP',
		expansion: {
			styles: [{}, {}] // 客製化地圖樣式，物件內可以放自訂樣式
		}
}];

// 實體化，請在onload之後實體化
var map = new MapPlugin('#spotMap', markers, {
    center: [25.0485562, 121.5410635], // or { lat: 25.0485562, lng: 121.5410635 }
		infoWindow: true, // 點擊標記彈出視窗
	  cluster: {
			title: '這個標記群組內有{{count}}個標記’, // {{count}}等於標記群組內的標記數量
			icon: {
				url:  'https://your-image-url.abc',
			},
			label: {
				color: '#a1a1a1'
			}
		}, // 使用標記群組
});

// 初始化
map.init();

// 路線繪製

var origin = [25.0485562, 121.5410635]; // or { location: { lat: 25.0485562, lng: 121.5410635 } } or { lat: 25.0485562, lng: 121.5410635 }
var waypoints = [{location: [24.143429,120.645212] }];
var destination = [24.1893376,120.6616064];

map.getRoute({
	origin, // 起點
	waypoints, // 中繼點
	destination, // 終點
}, function(res) {
}); // res 參數為回傳路線資訊

// 路線導航繪製，參數帶入selector，會將生成的html放入
map.getRoutePanel('#direction');

實體化

new MapPlugin(element, markers, options)

標記選項(markers)

選項(options)

方法

init()

地圖初始化

updateMarkers(markers)

更新標記

openInfoWindow(id)

打開標記視窗，需要在選項(options)中開啟infoWindow才會有效

closeAllInfoWindows()

關閉所有infoWindows

panTo(latLng)

移動中心點到經緯度

setZoom(num)

設定地圖縮放

getRoute(options, callback)

繪製導航路線

getDistanceMatrix(options, callback)

取得距離矩陣，像是兩點之間距離、時間等等(最多一次搜尋25個位置)

setIcon(id, icon)

修改標記icon

setAllIcon(iconArray)

根據標記的id設定所有icon

findMarkerById(id)

使用id取得原生Marker class

getCenter()

取得中心座標

2022 by Calvin v.1.0