ฉันใช้เวลาสองวันในการใช้ API ของ Google เพื่อสร้างสิ่งเล็กๆ น้อยๆ จริงๆ แล้วโค้ดการใช้งานจริงนั้นไม่ได้มีอะไรมาก แค่สิบกว่าบรรทัดเท่านั้น งานที่ต้องใช้เวลามากคือการทำความเข้าใจฟังก์ชันของแต่ละ API และการดีบัก JavaScript
ขอแนะนำฟังก์ชันบางอย่างที่ฉันใช้ในครั้งนี้โดยย่อ
•ตัวสร้าง google.search.LocalSearch()
สิ่งนี้จะสร้างบริการ LocalSearch จริงๆ บริการนี้เหมือนกับบริการอื่นๆ (ข่าว บล็อก เว็บ) ที่ SearchControl ใช้งาน บริการเหล่านี้กำหนดความสามารถของ SearchControl
•ตั้งค่าประเภทโครงสร้างการค้นหาของ LocalSearch
localSearch.setRestriction (google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS)
นี่แสดงว่าไม่มีผลลัพธ์ทางธุรกิจในผลการค้นหา มีเพียงผลลัพธ์ kml และ geocode เท่านั้น
•กำหนดขอบเขตการค้นหาของ LocalSearch
localSearch.setCenterPoint("ปักกิ่ง");
•google.search.SearcherOptions()
ตั้งค่าคุณสมบัติของ Search Service (Searcher) และใช้เป็นแอ็ตทริบิวต์ของ SearchControl.addSearcher() มีตัวเลือกต่อไปนี้:
1. ตั้งค่าวิธีการแสดงผล
•searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
2. ข้อความที่แสดงเมื่อไม่มีผลการค้นหาในโปรไฟล์
• searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);
3. กำหนดตำแหน่งที่จะแสดงผล
•searcherOptions.setRoot(resultCanvas);
• ใหม่ google.search.DrawOptions();
กำหนดวิธีการแสดงการควบคุมการค้นหาของ Google
•drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)
ตั้งค่าโหมดการแสดงผลเป็นโหมดแบบแท็บ กล่าวคือ ผู้ค้นหาแต่ละคนจะแสดงเหมือนแท็บ
•drawOptions.setInput(document.getElementById("อินพุต"));
เปลี่ยนค่าเริ่มต้นของช่องป้อนข้อมูลการค้นหาเป็นช่องป้อนข้อมูลที่ผู้ใช้กำหนด
ส่งกลับผลลัพธ์การค้นหาที่ผู้ใช้เลือกเป็นออบเจ็กต์ GResult ที่เกี่ยวข้อง ตัวอย่างเช่น GResult ของ LocalSearch คือ GLocalResult
ฉันใช้เวลานานกว่าจะพบตัวเลือกนี้ มีสองเหตุผล ประการแรก มีคนใช้น้อยและมีเอกสารน้อย ประการที่สอง ฉันใช้เวลานานในการทำความเข้าใจเอกสารภาษาอังกฤษที่ฉันอ่าน จริงๆ แล้ว ฉันคิดว่ามันใช้เวลานานกว่าในการอ่านเอกสารภาษาจีน
•searchControl.setOnKeepCallback(นี่คือ LocalSearchKeepHandler);
โดยวิธีการวางโค้ดของ LocalSearchKeepHandler ซึ่งมีพารามิเตอร์เป็นวัตถุ GResult ที่ส่งคืนโดยอัตโนมัติ
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น LocalSearchKeepHandler (ผลลัพธ์) {
var จาก = document.getElementById("จาก");
alert("result.tilte = " + result.title);
จาก.value = ProcessString(result.title);
alert("from.value = " + from.value);
//alert(result.title);
-
เพียงโพสต์โค้ดนี้ให้ครบถ้วนเพื่อให้อ่านง่ายขึ้น
คัดลอกรหัสรหัสดังต่อไปนี้:
google.load("ค้นหา", "1", {"ภาษา": "zh-CN"});
ฟังก์ชั่นเริ่มต้น () {
//LocalSearch Object ใช้เพื่อสร้างบริการค้นหาในท้องถิ่นสำหรับแผนที่
var localSearch = ใหม่ google.search.LocalSearch();
//จำกัดผลลัพธ์การค้นหาในท้องถิ่นเฉพาะผลลัพธ์ kml และ geocode เท่านั้น ไม่เกี่ยวข้องกับธุรกิจ
localSearch.setRestriction (google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS);
// ตั้งค่าจุดศูนย์กลางการค้นหาท้องถิ่น
localSearch.setCenterPoint("ปักกิ่ง");
//เป็นเรื่องเกี่ยวกับการค้นหาในท้องถิ่น ซึ่งใช้เพื่อกำหนดตำแหน่งที่ผลลัพธ์จะปรากฏ ซึ่งเป็นพารามิเตอร์ของตัวเลือก
var resultCanvas = document.getElementById("resultCanvas");
// ตัวเลือก: เปิด, รูทสำรอง
var searcherOptions = ใหม่ google.search.SearcherOptions();
//แสดงผลลัพธ์มากมาย
searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
//ไม่มีข้อความผลลัพธ์
searcherOptions.setNoResultsString (google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);
//options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);//web, local... ในการแสดงแท็บ
searcherOptions.setRoot(resultCanvas);//แสดงผลลัพธ์ในที่อื่น--<div id="resultCanvas">
//SearchControl Object ใช้เพื่อสร้างบริการค้นหาซึ่งจะรวมบริการค้นหาในท้องถิ่น
var searchControl = ใหม่ google.search.SearchControl(null);
searchControl.addSearcher (localSearch, searcherOptions);
searchControl.addSearcher(ใหม่ google.search.WebSearch());
searchControl.addSearcher(ใหม่ google.search.NewsSearch());
searchControl.addSearcher(ใหม่ google.search.BlogSearch());
//วาดตัวเลือกและตั้งค่าเป็นมุมมองแบบแท็บ
var DrawOptions = ใหม่ google.search.DrawOptions();
DrawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)
//ทำให้ searchControl ส่งคืนผลลัพธ์:GResult
searchControl.setOnKeepCallback(นี่คือ LocalSearchKeepHandler);//เก็บผลการค้นหาไว้
//ตัวเลือกนี้ใช้เพื่อกำหนดตำแหน่งช่องค้นหาในแผนผัง DOM
//drawOptions.setSearchFormRoot(document.getElementById("drawOptions"));
//ตั้งค่ากล่องอินพุตให้กับองค์ประกอบที่ผู้ใช้กำหนด
//drawOptions.setInput(document.getElementById("อินพุต"));
// บอกช่องค้นหาให้วาดเองแล้วบอกว่าจะแนบตรงไหน
//searchControl.draw(document.getElementById("searchBox"), DrawOptions);//ที่นี่ฉันเปลี่ยนจากที่อยู่และที่อยู่คางคกเป็นการค้นหาสถานที่ใหม่
// กล่องอินพุตอื่นที่ผู้ใช้กำหนด
DrawOptions.setInput(document.getElementById("input2"));
searchControl.draw();
/** รหัสด้านล่างเป็นเรื่องเกี่ยวกับ Google Ajax Map Search API
//ส่วนของโค้ดนี้ใช้เพื่อเพิ่มแถบด้านข้างเพื่อแสดงผลลัพธ์ของการค้นหา
//ฉันสงสัยว่าทำไมไม่มี 'var' ที่นี่
Optinos = วัตถุใหม่ ();
options.resultList = resultCanvas;
options.resultFormat = "หลายบรรทัด1";
var lsc2 = google.elements.LocalSearch ใหม่ (ตัวเลือก);
map.addControl(lsc2, GControlPosition ใหม่ (G_ANCHOR_TOP_LEFT, GSize ใหม่ (-282, -2)));
-
-
google.setOnLoadCallback (เริ่มต้น);