شیئ ها در نقشه گوگل قسمت پنجم

در قسمت گذشته از آموزش های سلسله مراتبی شرکت طراحی قالب وردپرس آنفایو نحوه تغیر موقعیت را برسی کرده ایم در این قسمت از آموزش های سلسله مراتبی شرکت طراحی قالب وردپرس آنفایو قصد برسسی نحوه ایجاد شیئ جدید را داریم.

همانطور که به خوبی میتوان اشیاء پیش فرض را کنترل کرد همانطور نیز میتوان شیئ جدید ایجاد کرد.معمولاً یک شیئ در نقشه شامل یک div است که به آن style داده شده.

برای ایجاد یک شیئ جدید به روش زیر باید عمل کرد.

1-      تعریف css برای شیئ جدید

2-      تعریع رویداد ها برای شیئ

3-      ایجاد یک <div> برای نگهداری عناصر شیئ

تعریف css:

برای تعریف یک عنصر جدید شما مختارید تا هر گونه که میخواهید عمل کنید ولی ما به شما پیشنهاد میدهیم تا از یک عنصر دایو استفاده کنید، و بعد به صورت زیر به آن استایل بدهید.

//ساخت یک دایو برای نگهداری شیئ.
var controlDiv = document.createElement('div');
// سی اس اس برای دایو
// دادن 5 پیکسل پدینگ به دایو
controlDiv.style.padding = '5px';
// سی اس اس برای شیئ.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// تنظیم سی اس اس برای داخل شیئ.
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<strong>Home</strong>';
controlUI.appendChild(controlText);

تعریف رویداد:

برای ساخت رویداد برای یک شیئ باید از addDomListener() استفاده کرد به طور مثال تکه کد زیر رویداد کلیک را برای مرورگر تعریف میکند.

توجه: رویداد افزوده شده در رویداد های گوگل مپ پشتیبانی نمیشود.

// Setup the click event listener: simply set the map to center on Chicago
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
google.maps.event.addDomListener(outer, 'click', function() {
map.setCenter(chicago)
});

موقعیت شیئ های ایجاد شده

به صورت زیر میتوانید موقعیت شیئ های ایجاد شده را تنظیم کنید

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('div');
var myControl = new MyControl(controlDiv);
// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;
// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

نمونه کد برای یک شیئ

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
*/
function HomeControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map.
controlDiv.style.padding = '5px';
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<strong>Home</strong>';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to Chicago.
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});
}
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 12,
center: chicago
}
map = new google.maps.Map(mapDiv, mapOptions);
// Create the DIV to hold the control and call the HomeControl() constructor
// passing in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}