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

Google Maps - قسمت پنجم

در حالت استاندارد نقشه های گوگل یکسری امکانات پیشفرض برای کنترل نقشه در اختیار ما قرار داره. در Google Maps – قسمت پنجم قصد داریم که از امکانات بیشتری استفاده کنیم.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

کنترل های پیشفرض:

ابتدا باهم بررسی میکنیم که کنترل های پیشفرض Google Maps شامل چه چیزهایی میشه:

  • zoom: نمایش یک اسلایدر یک کلید “+/ –” برای کنترل سطح بزرگنمایی نقشه
  • pan: نمایش یک پنل کنترل برای سوژه های متحرک
  • MapType: این کنترل به کابران اجازه میده بین دو نوع نقشه (نقشه جاده و ماهواره) تغییر وضعیت بدن.
  • Street view: نمایش یک آیکون آدمک که با کشیدن اون و قرار دادنش در هر جای نقشه حالت نمایش خیابانی فعال میشه.

کنترل های بیشتر:

به علاوه کنترل های گفته شده به امکانات نقشه های گوگل در زیر میشه اشاره کرد:

  • Scale: نمایش عنصر مقیاس نقشه
  • Rotate: نمایش یک آیکون دایره ایی که به اجازه چرخوندن نقشه رو میده
  • Overview: نمایش کوچکی برای بررسی اجمالی نقشه

برای اینکه امکانات مشخصی برای کنترل نقشه نمایش داده بشه باید هنگام ایجاد نقشه داخل MapOptions یا به وسیله فراخوانی تابع ()setOptions امکانات نقشه رو تعویض کنین.

غیرفعال کردن کنترل پیشفرض:

شاید شما تمایل داشته باشید که امکانات پیشفرض نقشه رو غیر فعال کنید. برای اینکار باید ویژگی disableDefaultUI نقشه رو به true تنظیم کنید.

disableDefaultUI:true

فعال کردن تمام کنترل ها:

بسیاری از کنترل کننده های نقشه در Google Map پس از ایجاد شدن به صورت پیش فرض ظاهر میشوند در حالی که بعضی از اون ها در دسترس نیستند مگر اینکه خودتون تنظیم کرده باشین تا نمایش داده بشن. اضافه یا کم کردن کنترل ها در نقشه توسط شیئ Map options مشخص می شود. با تنظیم کردن این شیئ به true یا fulse این کنترل هارو به ترتیب نمایان و مخفی میکند. در کد مثال زیر تمام کنترل ها فعال هستند.

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

اصلاح کنترل ها:

تعدادی از کنترل های نقشه قابل تنظیم هستند. کنترل ها رو با مشخص نمودن زمینه control options میتونیم اصلاح کنیم. برای مثال اگر قصد اصلاح بزرگنمایی یک کنترل رو داشته باشیم باید به صورت zoomControlOptions تعریف کنیم. این اصلاح زمینه شامل محتوای زیر میباشد:

  • google.maps.ZoomControlStyle.SMALL: نمایش کنترل یک مینی زوم. یعنی فقط کلید های + یا -.
  •  google.maps.ZoomControlStyle.LARGE: نمایش کنترل زوم استاندارد یا اسلایدر
  •  google.maps.MapTypeControlStyle.DEFAULT: نمایش پیشفرض بسته به اندازه تصویر کاربر

zoomControl:true,
zoomControlOptions: {
 style:google.maps.ZoomControlStyle.SMALL
}

توجه داشته باشید که اگر شما یک کنترل را اصلاح کنید، همیشه کنترل در ابتدا فعال میمونه. کنترل دیگری که قابل اصلاح است MapType می باشد. اصلاح گزینه ها توسط  mapTypeControlOptions مشخص میشود و این فیلد حاوی امکانات زیر است:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR: نمایش یک کلید برای هر نوع نقشه
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU: انتخاب نوع نقشه به وسیله منوی dropdown.
  • google.maps.MapTypeControlStyle.DEFAULT: نمایش پیشفرض بسته به اندازه تصویر کاربر.

mapTypeControl:true,
mapTypeControlOptions: {
    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

همچنین توسط ویژگی ControlPosition می توان موقعیت یک کنترل رو تعیین کنید.

mapTypeControl:true,
mapTypeControlOptions: {
    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    position:google.maps.ControlPosition.TOP_CENTER
}

کنترل سفارشی:

برای اینکه یک کنترل سفارشی ایجاد کنیم تا از هرجای نقشه که رفتیم به یک مکان توسط یک کلیک بازگردیم، تغییرات زیر را اعمال میکنیم:

controlDiv.style.padding =’5px’;
var controlUI = document.createElement(‘div’);
controlUI.style.backgroundColor = ‘yellow’;
controlUI.style.border=’1px solid’;
controlUI.style.cursor =’pointer’;
controlUI.style.textAlign =’center’;
controlUI.title = ‘Set map to Tehran’;
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 ='<b>Home<b>’
controlUI.appendChild(controlText);

به پایان این قسمت از سری مقالات Google Maps رسیدیم. از همراهی شما متشکریم.

تاریخ ارسال
11 خرداد 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه

canvas - پروژه ساخت ساعت - پایانی

در هر قسمت از پروژه یک گوشه از کار رو انجام دادیم و هر دفعه یک قسمتشو ساختیم. در قسمت اول ظرف canvas مورد نیازمون رو ایجاد کردیم. سپس به ساختن چهره و شکل شمایل ساعتمون پرداختیم. در قسمت سوم هم اعداد ساعت و عقربه های اونو طراحی کردیم. در آخر قصد داریم این ساعت رو به کار بیاندازیم. در canvas – پروژه ساخت ساعت بخش پایانی ، ما با استفاده از canvas ها در HTML ساعت عقربه ایی یا آنالوگمون رو میسازیم پس با ما همراه باشین.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

استارت ساعت:

در آخرین مرحله از پروژه تنها چیزی که لازمه انجام بدیم، فراخوانی تابع drawClock در توابعی که فواصل زمانی رو تنظیم میکند. یعنی تابع ;(setInterval(drawClock, 1000 را با تابع  ;()drawClock جایگزین می کنیم. توابع فاصله زمانی  darwClock رو 1000 بار در هر میلی ثانیه فرا خوانی میکنه. کد زیر به طور کامل یک ساعت رو با کمک JavaScript پیاده سازی میکنه:

<!DOCTYPE html>
<html>
<body>
<canvas id=”canvas” width=”400″ height=”400″

style=”background-color:#333″>
</canvas>
<script>
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = ‘white’;
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, ‘#333’);
grad.addColorStop(0.5, ‘white’);
grad.addColorStop(1, ‘#333’);
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = ‘#333’;
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + “px arial”;
ctx.textBaseline=”middle”;
ctx.textAlign=”center”;
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = “round”;
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
</body>
</html>

خب شما حالا قادرین که به قالب سایتتون یک ساعتت آنالوگ اضافه کنید و به اون جلوه زیباتری بدین. ممنون که مارو دراین سری مقاله همراهی کردین.

تاریخ ارسال
10 خرداد 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه

SVG Text

در سری مقالات قبلی تصاویر با SVG به ترسیم اشکال مختلف پرداختیم و نحوه ایجادشون رو توضیح دادیم. در این قسمت به ایجاد تصاویر جدیدی در SVG ها که اون هم قرار دادن متن یا نوشته در SVG ها میباشد. لطفا تا آخر مقاله همراه ما باشید.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

<SVG Text – <text:

برای این که در SVG ها یک متن قرار دهیم از عنصر <text> استفاده میکنیم. در کد مثال زیر یک SVG ایجاد و درون آن متنی قرار می دهد.

<!DOCTYPE html>
<html>
<body>
<svg height=”30″ width=”200″>

<text x=”0″ y=”15″ fill=”red”>I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

همچنین ما میتونیم توسط ویژگی transform، نوشتمون رو به هر میزان که میخوایم بچرخونیم. به کدر زیر دقت کنید.

<!DOCTYPE html>
<html>
<body>
<svg height=”60″ width=”200″>

<text x=”0″ y=”15″ fill=”red” transform=”rotate(30 20,40)”>I love SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

توسط عنصر <tspan> می تونیم در عنصر <text> چیدمان هر تعداد از زیرگروه های متنی رو مرتب کنیم. هر عنصر <tspan> حاوی چندین فرمت و موقعیت مختلف است. کد زیر نمایانگر حرفایی که زدیم هست :

<!DOCTYPE html>
<html>
<body>
<svg height=”90″ width=”200″>

<text x=”10″ y=”20″ style=”fill:red;”>Several lines:
<tspan x=”10″ y=”45″>First line.</tspan>
<tspan x=”10″ y=”70″>Second line.</tspan>
</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

برای اینکه بتونیم یک متن رو به عنوان لینک یا پیوست قرار بدیم باید از طریق زیر عمل کنیم:

<!DOCTYPE html>
<html>
<body>
<svg height=”30″ width=”200″ xmlns:xlink=”https://learnfiles.com/“>

<a xlink:href=”https://learnfiles.com/” target=”_blank”>
<text x=”0″ y=”15″ fill=”red”>I love SVG!</text>
</a>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

امیدوارم مطالب گفته شده بدردتون خورده باشه. ممنون از همراهیتون.

تاریخ ارسال
10 خرداد 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه

بازی سازی با HTML - بخش پایانی

بازی سازی با HTML – بخش پایانی رسیدیم و امیدواریم که از این سری مقالات نهایت استفاده رو برده باشین و با هم محیط متفاوتی در برنامه نویسی تحت وب تجربه کرده باشیم. در این بخش به مطالب تکمیلی و نهایی میپردازیم تا قادر به پیاده سازی یک بازی باشید.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

چرخش قطعات:

در مقاله های قبلی ما میتونستیم که یک قطعه یا همون مربع قرمزمون رو به اطراف منطقه بازی حرکت بدیم و اونو جابجا کنیم. ولی نتونستیم به دور خودش بچرخونیم. برای چرخوندن قطعه به دور خودش مجبوریم راه ترسیم قطعه رو عوض کنیم. با استفاده از متد چرخش این اجازه رو داریم که درون یک عنصر canvas محتویات داخلشو بچرخونیم.

بازی سازی با HTML - بخش پایانی  بازی سازی با HTML - بخش پایانی rotate1

هر چیزی که درون canvas ها ترسیم کردین رو میتونین بچرخونین، نه تنها اجزاء خاص. ما با تغییراتی در متد ()update امکان این چرخش رو فراهم میکنیم:

ابتدا، ما canvas اخیر رو توسط شی context ذخیره میکنیم:

ctx.save();

سپس با استفاده از متد translate ما تمام بوم رو به مرکز یک جزء خاص منتقل میکنیم.

ctx.translate(x, y);

بازی سازی با HTML - بخش پایانی  بازی سازی با HTML - بخش پایانی game movement1

سپس ما چرخشی رو که میخوایم رو با استفاده از متد ()rotate انجام بدیم.

ctx.rotate(angle);

بازی سازی با HTML - بخش پایانی  بازی سازی با HTML - بخش پایانی game movement2

حالا ما آماده به ترسیم اجزاء درون canvas هستیم. ولی باید موقعبت canvas رو به (0و0) و با همون چرخشی که برای محتوا دادیم، برگردونیم.

ctx.fillRect(width / -2, height / -2, width, height);

بازی سازی با HTML - بخش پایانی  بازی سازی با HTML - بخش پایانی game movement3

در نهایت ما باید زمینه ذخیره شده رو در موقعیت جدید بازگردانی کنیم:

ctx.restore();

بازی سازی با HTML - بخش پایانی  بازی سازی با HTML - بخش پایانی game movement4

سازنده component :

در سازنده component یک ویژگی جدید به نام angle (درجه) وجود دارد که تعداد رادیان درجه قطعه رو بیان میکنه. متد update در سازنده component که اجزاء رو ترسیم میکنه، میتونیم تغییرات چرخشی رو که با اون دادیم رو ببینیم.

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
    this.angle = 0;
    this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
        ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width,this.height);
ctx.restore();
    }
}
function updateGameArea() {
myGameArea.clear();
    myGamePiece.angle += 1 * Math.PI / 180;
    myGamePiece.update();
}

چگونگی حرکت اشیاء :

 ویژگی speed در سازنده component که بیان کننده سرعت اخیر جزء می باشد، اضافه میکنیم و همچنین با ایجاد بعضی تغییرات در متد ()newPos برای محاسبه موقعیت قطعه بر پایه speed و angel. به طور پیشفرض قطعه به طرف بالا رفته و با تنظیم عدد 1 برای ویژگی speed جابجایی به جلو استارت خواهد خورد.

function component(width, height, color, x, y) {
this.gamearea = gamearea;
this.width = width;
this.height = height;
this.angle = 0;
    this.speed = 1;
    this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width,this.height);
ctx.restore();
}
    this.newPos = function() {
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}

ایجاد چرخش :

با ایجاد یک ویژگی جدید به نام moveAngle که نشون دهنده زاویه چرخش است و متد ()newPos که زاویه رو بر پایه ویژگی moveAngel محاسبه میکند، میتونیم به چپ یا راست قطعه رو بچرخونیم.

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
    this.moveAngle = 1;
    this.speed = 1;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width,this.height);
ctx.restore();
}
this.newPos = function() {
        this.angle +=this.moveAngle * Math.PI / 180;
        this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}

استفاده از کیبورد :

با کد مثال زیر ما قطعه رو توسط جهت های کیبورد به طرفین حرکت میدیم. کد زیر رو امتحان کنید تا متوجه بشین.

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload=”startGame()”>
<script>
var myGamePiece;
function startGame() {
myGamePiece = new component(30, 30, “red”, 225, 225);
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement(“canvas”),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext(“2d”);
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
window.addEventListener(‘keydown’, function (e) {
e.preventDefault();
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == “keydown”);
})
window.addEventListener(‘keyup’, function (e) {
myGameArea.keys[e.keyCode] = (e.type == “keydown”);
})
},
stop : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.speed = 0;
this.angle = 0;
this.moveAngle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
this.newPos = function() {
this.angle += this.moveAngle * Math.PI / 180;
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);

}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.moveAngle = 0;
myGamePiece.speed = 0;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -1; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 1; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 1; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -1; }
myGamePiece.newPos();
myGamePiece.update();
}
</script>
<p>Make sure the gamearea has focus, and use the arrow keys to move the red square around.</p>
</body>
</html>

با تشکر ازشما کاربران عزیز که در این سری مقالات ما رو همراهی کردین و امیدواریم نهایت استفاده از مجموعه مقالات بازی سازی با HTML برده باشین.

تاریخ ارسال
9 خرداد 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه

Google Maps - قسمت چهارم

در Google Maps – قسمت چهارم به بررسی کردن رویدادهایی که برای مارکر ها(نشانگرها) در Google Maps وجود دارند بپردازیم. درباره نشانگرها در مقاله قبل توضیح دادیم. پس با ما تا آخر مقاله همراه باشین.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

Google Maps Events :

ما میتونیم به نشانگرها رویدادهایی برای گرداندن نقشه ضمیمه کنیم. در زیر یک یک آن ها را بررسی میکنیم.

بزرگنمایی با کلیک بر نشانگر :

ما دراینجا از نقشه ایی که در مقاله اول ایجاد کردیم، استفاده میکنیم. در اونجا مرکز نقشه برروی تهران-ایران قرار گرفته است. اکنون قصد داریم، هنگامی که کاربر برروی نشانگر کلیک کرد عمل بزرگنمایی انجام بشه. با اضافه کردن رویداد زیر ما این عمل رو امکان پذیر میکنیم:

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,’click’,function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });

ما از متد ()addListener برای اعلام رویداد استفاده کردیم. این متد یک شیئ فراخوان شده رو بهش یک رویداد منسوب میکنه، و در آخر اقدام لازمه رو انجام میده.

حرکت برگشت به نشانگر :

دراینجا، ما یک رویداد گرداننده اضافه میکنیم تا ویژگی center و حرکت برگشت نقشه به نشانگر پس از 3 ثانیه به وسیله رویداد center_changed رو تغییر بده.

google.maps.event.addListener(map,’center_changed’,function() {
  window.setTimeout(function() {
    map.panTo(marker.getPosition());
  },3000);
});

باز شدن InfoWindow با کلیک روی نشانگر :

با تغییر رویداد زیر میتونیم با کلیک روی نشانگر یک infowindow که درونش متن دلخوامون رو نوشتیم نمایش بدیم:

var infowindow = newgoogle.maps.InfoWindow({
  content:”Hello World!”
  });

google.maps.event.addListener(marker, ‘click’, function() {
  infowindow.open(map,marker);
});

تنظیم نشانگرها و باز شدن InfoWindow برای هر نشانگر :

با اجرای یک تابع به نام ()placeMarker این رویداد بوجود میاد که هر کاربر با کلیک در هرجای نقشه، یک نشانگر به همراه infowindow با اطلاعات طول و عرض جغرافیایی نمایش داده خواهد شد.

google.maps.event.addListener(map,’click’, function(event) {
  placeMarker(event.latLng);
  });
function placeMarker(location) {
var marker = newgoogle.maps.Marker({
position: location,
map: map,
});
var infowindow = newgoogle.maps.InfoWindow({
content: ‘Latitude: ‘ + location.lat() +
‘<br>Longitude: ‘ + location.lng()
});
infowindow.open(map,marker);
}

به پایان بخش چهارم مقاله Google Maps رسیدیم و امیدواریم که مطالب برای شما مفید واقع شده باشه. ممنون از همراهی شما.

تاریخ ارسال
9 خرداد 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه
صفحات
صفحه 1 از 5
1 2 3 5