ยานเดกซ์แมป api 2.1 การเปลี่ยนแปลง

ในบทความนี้ ฉันต้องการเริ่มชุดบทความเกี่ยวกับการทำงานกับ Yandex.Maps API เอกสาร Yandex.Maps ค่อนข้างสมบูรณ์ แต่ระดับการกระจายตัวของข้อมูลอยู่ในระดับสูง เมื่อคุณเข้าสู่เอกสารโดยไม่มีครึ่งลิตรในครั้งแรก คุณไม่สามารถเข้าใจได้ และเพื่อแก้ปัญหา คุณสามารถใช้ มีเวลามากในการค้นหาเอกสารและในเครื่องมือค้นหา บทความชุดนี้จะพูดถึงวิธีแก้ปัญหาที่ใช้งานได้จริงสำหรับกรณีทั่วไปของการใช้ Yandex.Maps API เวอร์ชันล่าสุด ณ เวลาที่เขียนนี้

เมื่อจัดวางไซต์ในข้อมูลการติดต่อมักจำเป็นต้องแทรกแผนที่ซึ่งจะมีการทำเครื่องหมายที่ตั้งขององค์กรที่ไซต์กำลังพัฒนา ในกรณีที่ง่ายที่สุด นี่อาจเป็นเพียงภาพหน้าจอจากแผนที่ออนไลน์ (หรือไม่ออนไลน์ก็ได้):

สำหรับใส่ แผนที่แบบโต้ตอบสามารถใช้ตัวสร้างแผนที่ได้
https://tech.yandex.ru/maps/tools/constructor/ :

หากเราต้องการใช้แผนที่ขั้นสูงกว่านี้ (ป้ายกำกับของเรา การเคลื่อนที่แบบเป็นโปรแกรมของแผนที่ ฯลฯ) สำหรับสิ่งนี้ เราจำเป็นต้องใช้ Yandex.Maps API: https://tech.yandex.ru/maps/jsapi/ . ตัวอย่างการใช้แผนที่ บทความนี้จะกล่าวถึงการสร้างแผนที่ด้วยการเพิ่มป้ายกำกับและบอลลูนที่กำหนดเองอย่างง่าย

ขั้นแรก มาเชื่อมต่อส่วนประกอบ API:

หากมีการพัฒนาแอปพลิเคชันขนาดใหญ่โดยใช้แผนที่ จะเป็นการดีกว่าที่จะเชื่อมต่อส่วนประกอบ API ของบางเวอร์ชันเพื่อที่ว่าเมื่ออัปเดต API ทางฝั่ง Yandex จะไม่มีอะไรหยุดทำงาน:

แผนที่จะต้องอยู่ในบางช่วงตึกเช่นใน div#map. ถัดไป ต้องสร้างแผนที่ในบล็อกนี้ (หลังจากเหตุการณ์ความพร้อมของแผนที่และ DOM ถูกทริกเกอร์):

ymaps.ready(เริ่มต้น) ; function init() ( var myMap; myMap = new ymaps.Map ("map" , ( ศูนย์: [ 55.76 , 37.64 ] , ซูม: 7 ) ) ; )

ที่นี่เราระบุ:

ตัวระบุบล็อก แผนที่ที่เราจะสร้างแผนที่
ศูนย์กลาง— ศูนย์กลางของแผนที่แสดงความกว้างและลองจิจูด
ซูม— ตัวคูณมาตราส่วนแผนที่

ตามค่าเริ่มต้น Yandex.Maps จะสร้างองค์ประกอบที่ไม่จำเป็นจำนวนมาก ซึ่งโดยส่วนใหญ่แล้วไม่จำเป็นบนเว็บไซต์ โดยพื้นฐานแล้ว การนำ 2 เงื่อนไขไปใช้กับการควบคุมและพฤติกรรมของแผนที่ก็เพียงพอแล้ว:

ขององค์ประกอบแผนที่ มีเพียงแถบเลื่อนการซูมเท่านั้น
ไม่ควรซูมแผนที่ด้วยการเลื่อนเมาส์

เพื่อให้เป็นไปตามข้อกำหนดเหล่านี้ เราจึงเสริมรหัส:

ymaps.ready(เริ่มต้น) ; function init() ( var myMap; myMap = new ymaps.Map ("map" , ( center: [ 55.76 , 37.64 ] , zoom: 13 , controls: ) ); myMap.behaviors .disable ("scrollZoom" ); myMap การควบคุม .add ("zoomControl" , ( ตำแหน่ง: ( บนสุด: 15 , ซ้าย: 15 ) ) ) ; )

ที่นี่เราได้ปิดการใช้งาน scrollzoomและเพิ่ม "การควบคุมการซูม"วางจากมุมซ้ายบน

ตอนนี้เราต้องเพิ่มป้ายชื่อบนแผนที่ สำหรับบทความเราจะดาวน์โหลดรูปภาพจาก http://medialoot.com/item/free-vector-map-location-pins/ และใส่ลงในโค้ดดังนี้:

ที่นี่เราประกาศตัวแปร myPlacemarkที่เราเขียนเครื่องหมายในพารามิเตอร์แรก ymaps.Placemarkระบุพิกัดป้ายกำกับ และในพารามิเตอร์ที่สาม:

ระบุใน iconLayoutว่าจะใช้ภาพป้ายกำกับที่กำหนดเอง
iconImageHref- เส้นทางไปยังภาพ;
iconImageSize- ระบุขนาดของภาพ;
iconImageOffset- เราระบุการเลื่อนจากมุมบนซ้ายของรูปภาพไปยังจุดของรูปภาพ ซึ่งเราชี้ไปที่วัตถุที่เราต้องการ นี่เป็นสิ่งจำเป็นเพื่อที่ว่าเมื่อมีการปรับขนาดแผนที่ ตำแหน่งของป้ายจะไม่หลงทาง เหตุใดจึงระบุออฟเซ็ตเป็นค่าลบ - พระเจ้าเท่านั้นที่รู้จักผู้สร้าง API

และผ่าน myMap.geoObjects.add()เพิ่มเครื่องหมายลงในแผนที่

และตอนนี้เราจะทำบอลลูนที่จะแสดงเมื่อเราคลิกที่ป้ายแผนที่ เราจะนำเค้าโครงของบอลลูนและเนื้อหาจาก http://designdeck.co.uk/a/1241

ymaps.ready(เริ่มต้น) ; function init() ( var myMap; myMap = new ymaps.Map ("map" , ( center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: ) ); myMap.behaviors .disable ("scrollZoom" ); myMap ตัวควบคุม .add ("zoomControl" , ( ตำแหน่ง: ( บนสุด: 15 , ซ้าย: 15 ) ) ); var html = " " ; var myPlacemark = ymaps.Placemark ใหม่ ([ 55.7649 , 37.63836 ] , ( balloonContent: html ) , ( iconLayout: "default#image" , iconImageHref: "http://site/files/APIYaMaps1/min_marker.png", iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] , balloonLayout: "default#imageWithContent" , balloonContentSize: [289 , 151 ] , balloonImageHref: "http://site/files/APIYaMaps1/min_popup.png", balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [289, 151 ] , balloonShadow: false ) ); myMap.geoObjects .add (myPlacemark) ; )

พวกเราอยู่ที่นี่:

ใน บอลลูนเนื้อหาระบุเนื้อหาที่จะแสดงเมื่อเปิดบอลลูน
บอลลูนเลย์เอาต์- ระบุว่าจะใช้รูปภาพที่กำหนดเองเป็นรูปแบบบอลลูน
ลูกโป่งContentSizeและ ลูกโป่งImageSize— ขนาดของเนื้อหาและรูปภาพตามลำดับ
balloonImageHref- เส้นทางไปยังภาพ;
balloonImageOffset- ออฟเซ็ตสัมพันธ์กับมุมซ้ายบน
บอลลูนเงา— ปิดการใช้งานเงาของบอลลูน (ไม่มีผลกับรูปภาพที่กำหนดเอง)

ผู้สมัครรุ่นคือเวอร์ชันของ API ซึ่งพร้อมใช้งานสำหรับสาธารณะ แต่ยังอยู่ภายใต้การอนุมัติ ก่อนที่จะติดตั้งตัวเลือกการเปิดตัวเป็นเวอร์ชันเสถียร ทันทีที่เปิดตัว จะมีการตรวจหาจุดบกพร่องที่อาจนำไปสู่การลดการทำงานของฟังก์ชัน API ด้วยการใช้ผู้สมัครรับเลือกตั้งในโครงการของคุณ คุณสามารถช่วยเราระบุข้อผิดพลาดที่อาจเกิดขึ้นได้ทันท่วงที คุณยังสามารถทดสอบการทำงานของแอปล่วงหน้าด้วย API เวอร์ชันใหม่

ผู้สมัครรุ่นควรใช้ในสภาพแวดล้อมการพัฒนาแอปและการทดสอบ ซึ่งจะช่วยคุณหลีกเลี่ยงข้อผิดพลาดในสภาพแวดล้อมการใช้งานจริง คุณสามารถเปิดใช้งานตัวเลือกการเปิดตัวได้ดังนี้:

ในตอนเริ่มต้น เราเชื่อมต่อแผนที่ API ที่ http://api-maps.yandex.ru/

ลองดูตัวเลือกโดยละเอียดเพิ่มเติม:

lang - ตั้งค่าโดยสองพารามิเตอร์ language_region

ภาษา - รหัสภาษาสองหลัก ระบุไว้ในรูปแบบ ISO 639-1
ภูมิภาค - รหัสประเทศสองหลัก ระบุในรูปแบบ ISO 3166-1

บน ช่วงเวลานี้โลแคลต่อไปนี้ได้รับการสนับสนุน:

lang=ru_RU;
lang=en_US;
lang=ru_UA;
lang=uk_UA;
lang=tr_TR.

สามารถใช้ตัวเลือกเพิ่มเติมได้:

coordorder - ลำดับที่ระบุพิกัดทางภูมิศาสตร์ในฟังก์ชัน API ที่ยอมรับคู่ละติจูดลองจิจูดเป็นอินพุต (เช่น หมุด)

ค่าที่เป็นไปได้:

ละติจูด - [ละติจูด, ลองจิจูด] - ใช้โดยค่าเริ่มต้น
ลองละติจูด - [ลองจิจูด, ละติจูด].

ค่าเริ่มต้น: latlong.

โหลด - รายการโมดูลที่จะโหลด

ค่าเริ่มต้น: package.full

โหมด - โหมดการโหลด API

mode=release - สามารถดาวน์โหลดรหัส API ในรูปแบบแพ็คเกจเพื่อลดการรับส่งข้อมูลและความเร็วในการดำเนินการในเบราว์เซอร์
mode=debug - โหมดดาวน์โหลดเป็นซอร์สโค้ด

ค่าเริ่มต้น: ปล่อย

อ่านเพิ่มเติมเกี่ยวกับตัวเลือกการเชื่อมต่อ

ในการแสดงแผนที่ มีการระบุคอนเทนเนอร์ขนาดไม่เป็นศูนย์ องค์ประกอบ HTML แบบบล็อกใดๆ สามารถใช้เป็นคอนเทนเนอร์ได้ ในตัวอย่างคือ div

พารามิเตอร์แผนที่ถูกกำหนดในรหัส:

myMap = ymaps.Map ใหม่ ('map', (
ศูนย์กลาง: , // ศูนย์กลางของแผนที่ Nizhny Novgorod
ซูม: 12 - ระดับการซูม
});

แผนที่ควรถูกสร้างขึ้นหลังจากโหลดหน้าเว็บทั้งหมดแล้ว เพื่อให้แน่ใจว่าคอนเทนเนอร์สำหรับแผนที่ถูกสร้างขึ้นและสามารถเข้าถึงได้โดย id ในการเริ่มต้นแผนที่หลังจากโหลดหน้า คุณสามารถใช้ฟังก์ชัน ready()

ฟังก์ชั่นพร้อมจะถูกเรียกเมื่อโหลด API และสร้าง DOM แล้ว

ymaps.ready(เริ่มต้น);

ฟังก์ชัน init()(
// สร้างตัวอย่างแผนที่และผูกเข้ากับคอนเทนเนอร์ด้วย
// ระบุ ID ("แผนที่")
myMap = ymaps.Map ใหม่ ('map', (
// เมื่อเริ่มต้นแผนที่ คุณต้องระบุ
// จุดศูนย์กลางและตัวคูณมาตราส่วน
ศูนย์: , // นิจนีนอฟโกรอด
ซูม: 12
});

โดยค่าเริ่มต้น แผนที่จะแสดงการควบคุมที่มีอยู่ทั้งหมด

ประเภทแผนที่ - แบบแผน

API มีแผนที่ในตัวห้าประเภท:

โครงการ (yandex#map) - โดยค่าเริ่มต้น;
ดาวเทียม (ยานเดกซ์#ดาวเทียม);
ไฮบริด (ยานเดกซ์#ไฮบริด);
แผนที่ประชาชน (yandex#publicMap);
ไฮบริดของแผนที่แห่งชาติ (yandex#publicMapHybrid)

ตัวอย่างการกำหนดประเภทของแผนที่ดาวเทียม

รหัสตัวอย่าง:

ด้านหลังประเภทแผนที่ - ดาวเทียม ตัวอย่างการสร้างแผนที่โดยใช้ Yandex.Maps API 2.1