استفتا از مارکر گوگل مپ در react js

[amirfarahani10]

رفقا سلام
من یه مشکلی دارم با google map توی reactjs مشکلی اینجاس که نمیتونم مارکر رو بندازه زاویه بچرخونم (چون دارم مسیر یه متحرک رو روی نقشه نشون میدم دیتای این نقاط از سمت سرور برای من میاد و شامل زاویه متحرک نسبت به نقطه قبلی توش هست ) توی نسخه react native مشکلی ندارم و خود google map یه ویژگی داره rotation این کارو انجام میده.خیلی سرچ کردم ولی چیزی پیدا نکردم و توی این موضوع گیر کردم و خیلی خیلی هم مهمه
ممنون میشم اگر کسی اطلاعاتی داره کمکم کنه.اینم بگم که از این لایبرری استفاده میکنم @react-google-maps/api
ممنونم

[مهدی حسن زاده]

سلام .منظورتون رو از زاویه متحرک متوجه نمیشم؟
یکم توضیح بیشتری میدین؟

[امیر]

ممنونم از شما .
ببینید سرور وقتی میخواد نقاط متجرک رو به من بده از قبل زاویه و جهت حرکت متحرک رو از نقطقه a به نقطه b رو محاسبه میکنه و توی json به من میده به اسم direction من طبق اون باید جهت فلش رو عوض کنم برای اینکه بییشتر متوجه بشد من نمونه ای از آرایه ای که از سورور میگیرم رو براتون میذارم :
[ { BATTERYDANGER: null, DANGER: null, DIRECTION: “246”, DOORSTATE: “در بسته”,GPSDANGER: null, ID: 1,INPUTSTATUS_ACC: “Off”, MESSAGETIME: “8دقيقه پيش”,MOVINGSTATE: “s”,NICKNAME:”مسعود نبوی نژاد ایران 62 – 374 ع 66″,
PAUSETIME: 900,
POSDESCRIPTION: “سایت تهران”,
SENTDATE: “12:29”,
SIGNATURE: “1-Normal”,
SPEED: “10”,
TEMPERATURE: “28.7”,
TRUCKSTATE: “متوقف”,
XPOINT: 51.37535,
YPOINT: 35.6141883
},
{
BATTERYDANGER: null,
DANGER: null,
DIRECTION: “352”,
DOORSTATE: “در بسته”,
GPSDANGER: null,
ID: 2,
INPUTSTATUS_ACC: “Off”,
MESSAGETIME: “14دقيقه پيش”,
MOVINGSTATE: “s”,
NICKNAME: “مسعود نبوی نژاد ایران 62 – 374 ع 66”,
PAUSETIME: 900,
POSDESCRIPTION: “سایت تهران”,
SENTDATE: “12:23”,
SIGNATURE: “1-Normal”,
SPEED: “0”,
TEMPERATURE: “28.6”,
TRUCKSTATE: “متوقف”,
XPOINT: 51.3815433,
YPOINT: 35.5440816
},
{
BATTERYDANGER: null,
DANGER: null,
DIRECTION: “337”,
DOORSTATE: “در بسته”,
GPSDANGER: null,
ID: 3,
INPUTSTATUS_ACC: “Off”,
MESSAGETIME: “21دقيقه پيش”,
MOVINGSTATE: “s”,
NICKNAME: “مسعود نبوی نژاد ایران 62 – 374 ع 66”,
PAUSETIME: 900,
POSDESCRIPTION: “سایت تهران”,
SENTDATE: “12:16”,
SIGNATURE: “1-Normal”,
SPEED: “0”,
TEMPERATURE: “28.4”,
TRUCKSTATE: “متوقف”,
XPOINT: 51.3517616,
YPOINT: 35.5019466
},]

[مهدی حسن زاده]

فکر میکنم با DirectionsRenderer
کارتون راه بیفته اگر درست متوجه شده باشم
https://tomchentw.github.io/react-google-maps/#directionsrenderer

[amirfarahani10]

ممنونم از وقتی که میذارید . ن ابن مورد نبود. من کاری که به یه نتیجه نسیبتا خوبی رسیدم رو ااینجا میگم و اینکه هنوز یه مشکلی دارم اونم میگم خدممتون اگه مقدور بود اونو پاسخ بدید.
ببینید من اون آرایه ای که از سمت سرور میاد گاها ۱۰۰ تا ابجک از طول و عرض جغرافیایی داره که من با این ۱۰۰ تا نقطه polyline مسیر رو میکشم. بعد میام از این متد که پایین تر میذارم براتون فایل مارکر خودمو با فرمت png هست میچرخونم :

JavaScript

async function rotateImage(imageBase64, rotation) { var img = new Image(); img.src = imageBase64; img.style.backgroundColor = "#ffffff" return new Promise(resolve => { img.onload = () => { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = img.width; canvas.height = img.height; ctx.fillStyle = "rgba(255,255,255,.6)"; ctx.fillRect(0, 0, canvas.width, canvas.height); // ctx.globalAlpha = 0.5 //ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2) ctx.rotate(rotation * (Math.PI / 180)); // ctx.setTransform(1, 0, 0, 1, img.width / 2, img.height / 2); ctx.drawImage(img, -img.width / 2, -img.height / 2); ctx.restore(); //canvas.toDataURL("image/jpeg") resolve(canvas.toDataURL("image/jpeg")) //return canvas.toDataURL("image/jpeg"); }; })

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

async function rotateImage(imageBase64, rotation) {         var img = new Image();         img.src = imageBase64;         img.style.backgroundColor = "#ffffff"           return new Promise(resolve => {             img.onload = () => {                 var canvas = document.createElement("canvas");                 var ctx = canvas.getContext("2d");                 canvas.width = img.width;                 canvas.height = img.height;                   ctx.fillStyle = "rgba(255,255,255,.6)";                 ctx.fillRect(0, 0, canvas.width, canvas.height);                // ctx.globalAlpha = 0.5                 //ctx.clearRect(0, 0, canvas.width, canvas.height);                 ctx.save();                   ctx.translate(canvas.width / 2, canvas.height / 2)                 ctx.rotate(rotation * (Math.PI / 180));                 // ctx.setTransform(1, 0, 0, 1, img.width / 2, img.height / 2);                   ctx.drawImage(img, -img.width / 2, -img.height / 2);                   ctx.restore();                 //canvas.toDataURL("image/jpeg")                 resolve(canvas.toDataURL("image/jpeg"))                 //return canvas.toDataURL("image/jpeg");             };           })

حالا الان یه اتفاقی میفونه که بک گراند اون عکس جدیدی که با توجه به متد بالا تولید میشه سیاه هست و حاشیه داره (لازم به ذکره که بگم این عکس مارکر دایره هست و چهار طرف دایره سیاه میشه) میخوام بدونم چجوری میتونم اون بک گراند رو من ransparent کنم ؟؟
من یه نمونه توی سایت codesandbox گذاشتم
فقط شما باید بی زحمت دانلود کنید به صورت زیب و روی سیستمتون باز کنید یه اروروی میده که نمیدونم چیه (مربوط به cross orgin میشه(
code sandBox

[amirfarahani10]

ممنونم از وقتی که میذارید . ن ابن مورد نبود. من کاری که به یه نتیجه نسیبتا خوبی رسیدم رو ااینجا میگم و اینکه هنوز یه مشکلی دارم اونم میگم خدممتون اگه مقدور بود اونو پاسخ بدید.
ببینید من اون آرایه ای که از سمت سرور میاد گاها ۱۰۰ تا ابجک از طول و عرض جغرافیایی داره که من با این ۱۰۰ تا نقطه polyline مسیر رو میکشم. بعد میام از این متد که پایین تر میذارم براتون فایل مارکر خودمو با فرمت png هست میچرخونم :

JavaScript

async function rotateImage(imageBase64, rotation) { var img = new Image(); img.src = imageBase64; img.style.backgroundColor = "#ffffff" return new Promise(resolve => { img.onload = () => { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = img.width; canvas.height = img.height; ctx.fillStyle = "rgba(255,255,255,.6)"; ctx.fillRect(0, 0, canvas.width, canvas.height); // ctx.globalAlpha = 0.5 //ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2) ctx.rotate(rotation * (Math.PI / 180)); // ctx.setTransform(1, 0, 0, 1, img.width / 2, img.height / 2); ctx.drawImage(img, -img.width / 2, -img.height / 2); ctx.restore(); //canvas.toDataURL("image/jpeg") resolve(canvas.toDataURL("image/jpeg")) //return canvas.toDataURL("image/jpeg"); }; })

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

async function rotateImage(imageBase64, rotation) {         var img = new Image();         img.src = imageBase64;         img.style.backgroundColor = "#ffffff"           return new Promise(resolve => {             img.onload = () => {                 var canvas = document.createElement("canvas");                 var ctx = canvas.getContext("2d");                 canvas.width = img.width;                 canvas.height = img.height;                   ctx.fillStyle = "rgba(255,255,255,.6)";                 ctx.fillRect(0, 0, canvas.width, canvas.height);                // ctx.globalAlpha = 0.5                 //ctx.clearRect(0, 0, canvas.width, canvas.height);                 ctx.save();                   ctx.translate(canvas.width / 2, canvas.height / 2)                 ctx.rotate(rotation * (Math.PI / 180));                 // ctx.setTransform(1, 0, 0, 1, img.width / 2, img.height / 2);                   ctx.drawImage(img, -img.width / 2, -img.height / 2);                   ctx.restore();                 //canvas.toDataURL("image/jpeg")                 resolve(canvas.toDataURL("image/jpeg"))                 //return canvas.toDataURL("image/jpeg");             };           })

حالا الان یه اتفاقی میفونه که بک گراند اون عکس جدیدی که با توجه به متد بالا تولید میشه سیاه هست و حاشیه داره (لازم به ذکره که بگم این عکس مارکر دایره هست و چهار طرف دایره سیاه میشه) میخوام بدونم چجوری میتونم اون بک گراند رو من ransparent کنم ؟؟

من یه نمونه توی سایت codesandbox گذاشتم
فقط شما باید بی زحمت دانلود کنید به صورت زیب و روی سیستمتون باز کنید یه اروروی میده که نمیدونم چیه (مربوط به cross orgin میشه(
code sandBox

[نویسنده]

نوشته‌ها