前言:
這個範例在某個因緣之下所產生出來的產物，當時還在使用V2版本，又因為舊版本是前輩所寫的(實在是看不懂，太高深莫測了)，所以就自己去google map api v3官方網站尋求靈感.......
就搭配jQuery仿照了舊版本繼有的功能，分享給有需要的人參考。
以下是原始碼
這個範例在某個因緣之下所產生出來的產物，當時還在使用V2版本，又因為舊版本是前輩所寫的(實在是看不懂，太高深莫測了)，所以就自己去google map api v3官方網站尋求靈感.......
就搭配jQuery仿照了舊版本繼有的功能，分享給有需要的人參考。
以下是原始碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!--
sensor=true
要明確設定sensor true or false
詳細作用在查看
-->
<script type="text/javascript">
$(document).ready(function(){
var map;
var markersArray = [];//瞄點陣列
var myLatLng = new google.maps.LatLng(22.6231670,120.2865500);//預設地圖位置
var myOptions = {
zoom: 14,//設定地圖距離
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
/*
mapTypeId 設定map顯示類型 詳細如下:
ROADMAP 顯示 Google 地圖的正常、預設 2D 地圖方塊。
SATELLITE 顯示圖形地圖方塊。
HYBRID 會顯示圖形地圖方塊和特殊圖徵 (道路、城市名稱) 地圖方塊圖層的混合圖。
TERRAIN 會顯示實際起伏的地圖方塊，以展現地形高度和水域圖徵 (山嶽、河流等)。
*/
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
$(".CheckCount").click(function(){
var CheckVal=$(this).val();
var checkSplit=CheckVal.split(",");
var Lat=checkSplit[0];
var Lng=checkSplit[1];
var contentString=$(this).attr("title");
if($(this).prop("checked")){
createMarker(Lat,Lng,contentString);
}else{
/*
在要刪除指定座標前，先把勾選的座標帶入MapAPI轉換後的座標
(帶入的座標跟帶出的座標有差異)
* */
var MapLatLng=new google.maps.LatLng(Lat,Lng);
DeleteMarker(MapLatLng);
}
});
/*
在地圖上建立描點Function
*/
function createMarker(lat, Lng,contentString)
{
var MapLatLng=new google.maps.LatLng(lat,Lng);
var marker = new google.maps.Marker({
position: MapLatLng,
map: map,
clickable : true
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
//勾選後立即顯示其訊息
google.maps.event.trigger(marker,"click");
}
/*
刪除在地圖上指定座標描點
**/
function DeleteMarker(CheckVal){
for(var i=0;i<markersArray.length;i++){
//將所取消選取的座標與存在於地圖內陣列座標做分析
if($.trim(markersArray[i]["position"])==$.trim(CheckVal)){
markersArray[i].setMap(null);
markersArray[i].length=0;
}
}
}
});
</script>
</head>
<body>
<div>
<input type="checkbox" class="CheckCount" name="CheckCount" value="22.6231670,120.2865500" title="<div style='width:150px;height:150px;'>內容內容內容內容</div>"/>地點一
<input type="checkbox" class="CheckCount" name="CheckCount" value="22.6301800,120.2861870" title="<div style='width:150px;height:150px;'>內容內容內容內容2</div>"/>地點二
<input type="checkbox" class="CheckCount" name="CheckCount" value="22.6298160,120.2836490" title="<div style='width:150px;height:150px;'>內容內容內容內容3</div>"/>地點三
</div>
<div id="map_canvas" style="width:800px;height:600px;"></div>
</body>
</html>
3 則留言:
感謝分享，但是這邊我有遇到一個問題就是更改勾選為單選，點選單選後他描點不會自動清除
那這該怎麼辦？
原本我這邊控制勾選這
$(".CheckCount").click(function(){
//do something
if($(this).prop("checked")){ //判斷有勾選到
//進行瞄點
}else{
//刪除瞄點
}
});
假如您只是單選，那就要看您的單選是如何的介面 是 select 還是 button、
img ....等等之類的 假設我是 button ，我可以在button 標籤上加入 一個標籤
EX:
《button checkstate='true'》單選《/button》
預設給他 true 然後再點它的時候 用 jQuery prop 把它換成 false
在每次 button click 的時候 都先去判斷 checkstate 的狀態
看是 true 還是 false 再給予要瞄點 還是 刪除瞄點
**********以下是舉例程式************
$(button).click(function(){
//do something
if($(this).prop("checkstate")=="true"){
//進行瞄點
}else{
//刪除瞄點
}
});
希望回答有幫助到你 :))
***以下是舉例程式 更正***
$(button).click(function(){
//do something
if($(this).prop("checkstate")=="true"){
//進行瞄點
//進行瞄點後,需要把button的checkstate標籤更換成false
$(this).prop("checkstate","false");
}else{
//刪除瞄點
//刪除後需，要把button的checkstate標籤更換成true
$(this).prop("checkstate","true");
}
});
張貼留言