آموزش جاوااسکریپت › انجمن ها › react js › استفتا از مارکر گوگل مپ در react js
برچسب ها: reactjs google-maps
- این موضوع 5 پاسخ، 2 کاربر را دارد و آخرین بار در 2 سال، 8 ماه پیش بدست amirfarahani10 بهروزرسانی شده است.
-
نویسندهنوشتهها
-
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/#directionsrendereramirfarahani10مشارکت کنندهممنونم از وقتی که میذارید . ن ابن مورد نبود. من کاری که به یه نتیجه نسیبتا خوبی رسیدم رو ااینجا میگم و اینکه هنوز یه مشکلی دارم اونم میگم خدممتون اگه مقدور بود اونو پاسخ بدید.
ببینید من اون آرایه ای که از سمت سرور میاد گاها ۱۰۰ تا ابجک از طول و عرض جغرافیایی داره که من با این ۱۰۰ تا نقطه polyline مسیر رو میکشم. بعد میام از این متد که پایین تر میذارم براتون فایل مارکر خودمو با فرمت png هست میچرخونم :JavaScript12345678910111213141516171819202122232425262728293031async 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 sandBoxamirfarahani10مشارکت کنندهممنونم از وقتی که میذارید . ن ابن مورد نبود. من کاری که به یه نتیجه نسیبتا خوبی رسیدم رو ااینجا میگم و اینکه هنوز یه مشکلی دارم اونم میگم خدممتون اگه مقدور بود اونو پاسخ بدید.
ببینید من اون آرایه ای که از سمت سرور میاد گاها ۱۰۰ تا ابجک از طول و عرض جغرافیایی داره که من با این ۱۰۰ تا نقطه polyline مسیر رو میکشم. بعد میام از این متد که پایین تر میذارم براتون فایل مارکر خودمو با فرمت png هست میچرخونم :JavaScript12345678910111213141516171819202122232425262728293031async 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 -
نویسندهنوشتهها