GOOGLE MAP (整理中)
v2 跟 v3
因為 v2 版 不需要金鑰 已經不能使用了
而v3版本 必須要搭配金鑰
所以有流量限制 25000次/日
申請金鑰
首先你要有一個 女碰友 Google帳號
使用函式庫
- jquery
- maps.googleapis.com/maps/api/js?key=自己取得
- markerclusterer (要做叢集才需要)
- Libraries=geometry (參數，計算距離才要)
markerclusterer 叢集函式
以下亂七八糟資料 (暫存)
// 必要
#map{width: auto;height:500px;}
// 可選
.label{font-size: 13px;background: rgba(22,22,22,0.6);
color: #fff;padding-top: 0.25em;padding-right: 0.5em;
padding-bottom: 0.25em;padding-left: 0.5em; border-radius: 3px;font-family:Microsoft JhengHei;}
a {color: #516F9E;text-decoration: none;}
// 看你要放甚麼資料
var markerlist=[
{'addr':[地址], 'text': '<a href="XXX.html" target="_blank">瀏覽資料</a>',newLabel: 'tpl_title',newLabelCSS: 'label'},
];
/**
* 取得最北最南最東最西
*/
function bound(latitude,longitude,radius)
{
var bound = [],
l = 1000 * 111,
latx = radius/l,
lagx = latx / Math.cos(latitude),
latN = latitude + Math.abs(latx),
latS = latitude - Math.abs(latx),
lagE = longitude+ Math.abs(lagx),
lagW = longitude- Math.abs(lagx);
bound.latN = latN;
bound.latS = latS;
bound.lagE = lagE;
bound.lagW = lagW;
console.log(bound);
return bound;
}
/**
* 抓取現在位置 並將周圍地點取得
* @param {class} map [地圖]
* @return {viod}
*/
function glocation(map) {
var uus="https://www.googleapis.com/geolocation/v1/geolocate?key=TOKEN(自己取得)";
$.ajax({
url: uus,
type:"POST",
dataType:'json',
success:function (msg) {
console.log(msg);
map.setCenter(msg.location); //將地圖中心定位到查詢結果
map.setZoom(13); //將地圖中心定位到查詢結果
// 中心點座標
var latLngstart = new google.maps.LatLng(msg.location.lat,msg.location.lng);
// 圓餅的基本資料
var populationOptions = {
strokeColor : "#FF0000", // 顏色
strokeOpacity: 0.8,
strokeWeight : 2,
fillColor : "#FF0000",
fillOpacity : 0.35,
map : map, // 地圖
center : latLngstart, // 中心點
radius : 4000 //方圓直徑 //msg.accuracy是google抓取現在位置的相差
};
// 不用bb了
// bb=bound(msg.location.lat,msg.location.lng,4000);
// 標記廟宇 (地圖,起始點,方圓直徑)
markerr(map,latLngstart,4000);
// 劃圓
if(typeof(cityCircle)!=="undefined") cityCircle.setMap(null);
cityCircle = new google.maps.Circle(populationOptions);
}
});
}
/**
* 搜尋結果
* @param {[type]} map [description]
* @return {[type]} [description]
*/
function searchset(map){
var latLngstart = new google.maps.LatLng(markerlist[0].addr[0],markerlist[0].addr[1]);
map.setCenter(latLngstart); //將地圖中心定位到查詢結果
map.setZoom(11); //將地圖中心定位到查詢結果
// 標記 (地圖,起始點,方圓直徑)
var markers = [];
for (var i = 0; i < markerlist.length; i++) {
var data = markerlist[i];
add_location(data.text,data.addr[0],data.addr[1]);
}
set_current_location(map);
}
// 設置消息
function attachSecretMessage(marker, secretMessage, map, latLng) {
var infowindow = new google.maps.InfoWindow({
content: secretMessage
});
marker.addListener('click', function() {
infowindow.close();
infowindow.open(marker.get('map'), marker); //打開marker
map.panTo(latLng); //移動畫面到定位
});
}
/**
* markerr 標記座標
* @param {Closure} map [地圖]
* @param {Closure} latLngstart [使用者的中心點]
* @param {int} long [許可標記距離使用者中心的方圓半徑]
*/
function markerr(map,latLngstart,long){
var markers = [];
for (var i = 0; i < markerlist.length; i++) {
var data = markerlist[i];
var latLng = new google.maps.LatLng(data.addr[0],data.addr[1]);
var longadd=google.maps.geometry.spherical.computeDistanceBetween(latLngstart,latLng);
if(longadd<=long){
var marker = new google.maps.Marker({
// draggable:true,
position: latLng,
map:map
});
attachSecretMessage(marker,data.text, map, latLng);
}
// markers.push(marker); // 叢集
// }
}
// var markerCluster = new MarkerClusterer(map, markers); // 叢集
}
var locations = [];
// add new location to the locations array
function add_location(description, lastitude, longtitude) {
locations.push([description, lastitude, longtitude]);
console.log('#locations: ' + locations.length);
console.log(locations);
}
// Set all the markers in the location arrays and bound/frame the map
function set_markers(bounds, map) {
console.log('#locations: ' + locations.length);
console.log(bounds);
var infowindow=new google.maps.InfoWindow();
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
// Get current location based on the IP Address
function set_current_location(map) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
/*
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
*/
add_location('My location',
position.coords.latitude,
position.coords.longitude);
set_markers(new google.maps.LatLngBounds(), map);
}, function error(err) {
console.log('error: ' + err.message);
set_markers(new google.maps.LatLngBounds(), map);
});
} else {
alert("Geolocation is not supported by this browser.");
//set_markers(new google.maps.LatLngBounds(), map);
}
}
//初始化地圖
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -23.961181, lng: 120.679914},//center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
<?php
if(0){
echo 'searchset(map);'; // 使用者搜尋關鍵字
}else{
echo 'glocation(map);';// 取得使用者的座標
}
?>
}
google.maps.event.addDomListener(window, 'load', initialize);
<!-- 地圖初始點 -->
<div id="map"></div>