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

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
mmdarzi
4 سال پیش توسط mmdarzi مطرح شد
7 پاسخ

نصب نقشه فارسی در React Native

سلام و عرض ادب

می خواستم یه نقشه فارسی روی اپلیکیشن فروشگاه اینترنتی نصب کنم که موقعیت کاربر رو از طریق نقشه بگیره و ذخیره کنه (موقع وارد کردن آدرس محل سکونت)

یکی دو تا از این نقشه فارسی ها رو نصب کردم ولی دیگه پروژه اجرا نشد و ارور داد. نسخه ی ری اکت نیتیو هم 59.9 هستش

شما نقشه ای سراغ دارین بدون مشکل بشه نصب و استفاده کرد؟


ثبت پرسش جدید
سهیل حیدری
@hbr 4 سال پیش آپدیت شد
0

@mahdi.darzi
سلام دوست عزیز شما میتونید با وب ویو یک کامپوننت درست کنید و بزارید تو برنامتون و ازش به عنوان نقشه استفاده کنی
اگه کدش رو خواستید من قبلا نوشتم بگین براتون بفرستم.چون معمولا نقشه های فارسی کامپوننت برای ری اکت نیتیو نداره و یا اگه هست با نسخه هاش مشکل داره


mmdarzi
تخصص : برنامه نویس وب و موبایل
@mahdi.darzi 4 سال پیش مطرح شد
0

یعنی با همین وب ویو کاربر میتونه لوکیشنش رو انتخاب کنه و بعد از پایان درگ کردن روی نقشه، مختصات رو بهش برگردونه؟


سهیل حیدری
@hbr 4 سال پیش مطرح شد
0

@mahdi.darzi
بله
این کد html رو میزنید
من این کد رو برای نقشه نشان نوشتم شما میتونید با همین ایده برای سرویس دهنده مورد نظرتون بنویسید

  this.lat1=this.props.lat1;
  this.lng1=this.props.lng1;
  this.lat2=this.props.lat2;
  this.lng2=this.props.lng2;
  this.html=`
  <html lang="en">
  <head>
      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
      <script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js" type="text/javascript"></script>
  </head>
  <body>

  <div id="map" style="width: ${deviceWidth-20}px; height: ${deviceHeight/4}px; background: #eee; border: 2px solid #aaa;">

  </div>

  <script type="text/javascript">

  var myMap = new L.Map('map', {
          key: 'اینجا مرچنت کد رو از سرویس دهنده میگیرن',
          maptype: 'dreamy',
          poi: true,
          traffic: false,
          center: [${this.lat1}, ${this.lng1}],
          zoom: 14,

          tap:true,
          inertia:true
        }).on('mousedown',(ev)=>{
        ${this.props.selected==true?'marker.setLatLng(ev.latlng)':''} 
        ev.target.panTo([ev.latlng.lat,ev.latlng.lng])
       ${Platform.OS==='android'?'window.postMessage(ev.latlng.lat.toString()+","+ev.latlng.lng.toString())':''} 
        if(window.parent)  window.parent.postMessage(ev.latlng.lat.toString()+","+ev.latlng.lng.toString(),window.parent.origin)

        });  
        // circle = L.circle([${this.props.lat1}, ${this.props.lng1}], 500, {
        //   color: 'red',
        //   fillColor: '#f03',
        //   fillOpacity: 0.5
        // }).addTo(myMap)
        // circle.on('mousedown touchstart', onCircleDown);
        // function onCircleDown (e1) {
        //   myMap.dragging.disable();
        //   var mouseStartingLat = e1.latlng.lat;
        //   var mouseStartingLng = e1.latlng.lng;
        //   var circleStartingLat = e1.target._latlng.lat;
        //   var circleStartingLng = e1.target._latlng.lng;
        //   circle.on('mousemove', function (e2) {
        //       var mouseNewLat = e2.latlng.lat;
        //               var mouseNewLng = e2.latlng.lng;
        //               var latDifference = mouseNewLat - mouseStartingLat;
        //               var lngDifference = mouseNewLng - mouseStartingLng;
        //               var currentCircleCoords = L.latLng (circleStartingLat + latDifference, circleStartingLng + lngDifference);
        //               e1.target.setLatLng (currentCircleCoords);
        //   });
        //   circle.on ('mouseup', function () { 
        //                   circle.off('mousemove');
        //         myMap.dragging.enable();
        //               });
        // }
        var marker=L.marker([${this.lat1}, ${this.lng1}],{draggable:true}).addTo(myMap)
        .bindPopup(${this.props.titlePoint1!=null?`'${this.props.titlePoint1}'`:''})
        .openPopup().on('drag',(ev)=>{
          ${this.props.selected==true?'marker.setLatLng(ev.latlng)':''} 
          var targets = event.target;  // you could also simply access the marker through the closure
          var result1 = targets.getLatLng();
          ev.target.panTo([result1.latlng.lat,result1.latlng.lng])
          window.postMessage(result1.latlng.lat.toString()+","+result1.latlng.lng.toString()) //این کد به شما مقداری رو درون کد ری اکت نیتیو از سمت کد جاوا اسکریپت وب پاس میده و با تابع onMessage که در پایین معرفی کردم این مقادیر رو از طریق وب ویو میگیرن
        });
        // marker.dragging.enable();

       ${this.props.markPoint2!=null? `var marker2=L.marker([${this.lat2}, ${this.lng2}]).addTo(myMap)
        .bindPopup(${this.props.titlePoint2!=null?`'${this.props.titlePoint2}'`:''})
        .openPopup();`:''
      }
        </script>
  </body>
  </html>`;

   <AutoHeightWebView //این کامپوننت یا webview فرقی نداره

originWhitelist={['*']}
source={{
  html: this.html
}}

dataDetectorTypes={'none'}
injectedJavaScript={`(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`}
onNavigationStateChange={this.onNavigationStateChange}
startInLoadingState
scalesPageToFit
javaScriptEnabled //این ماله فعال سازی کد های جاوا اسکریپ هستش

onMessage={(event)=>{this.latlng=event.nativeEvent.data; // تو این تابع میتونید پارامترهای پاس داده شده از کد وب رو دریافت کنید
console.log(this.latlng)
  this.getLatlng(this.latlng);
  this.lat1=this.latlng.split(",")[0];
  this.lng1=this.latlng.split(",")[1];

}}

style={{ flex: 1,width:deviceWidth }}       /> 

mmdarzi
تخصص : برنامه نویس وب و موبایل
@mahdi.darzi 4 سال پیش مطرح شد
0

خیلی ممنون از محبت تون

لطف کردید 🌹


mmdarzi
تخصص : برنامه نویس وب و موبایل
@mahdi.darzi 4 سال پیش مطرح شد
0

ببخشید این متد کجا تعریف شده؟
this.getLatlng(this.latlng);

و دیگه اینکه مگر نباید وقتی نقشه رو اسکرول می کنیم یا در جایی از اون کلیک می کنیم مارکر بره همونجا؟

قبل یا بعد از این کدهایی که دادین جایی چیز دیگه ای نباید تعریف کنیم؟

مقدار اولیه اینها رو چی باید بدم؟

 this.lat1 = this.props.lat1;
 this.lng1 = this.props.lng1;
 this.lat2 = this.props.lat2;
 this.lng2 = this.props.lng2;

nilrezaee88
@nil.rezaee88 3 سال پیش مطرح شد
0

@khosravi424
سلام وقت بخیر
ممنون از شما آقای خسروی عزیز بابت کدی که قرار دادید کمک بزرگی به بنده کردید 🙏🙏🙏
من تنظیمات لوکیشن رو انجام دادم و توی نسخه دیباگ اپ روی موبایل با باز شدن نقشه درخواست فعال سازی لوکیشن میاد و همه مواردی که نیاز کارم بوده مثل لوکیشن های مورد نظر و لوکیشن جاری به درستی کار می کنه اما وقتی خروجی apk رو می گیرم و نصبش می کنم و وارد نقشه می شم درخواست فعالسازی gps نمیاد خودم هم که gps رو فعال می کنم انگار تنظیمات نقشه متوجه فعالسازی نمی شه و لوکیشن جاری رو نمایش نمی ده
ممنون می شم اگر در این زمینه تجربه ای دارید در اختیار بنده بذارید🌹🌹


سهیل حیدری
@hbr 2 سال پیش مطرح شد
0

@nil.rezaee88
سلام شما میتوانید پس از اجازه گرفتن از کاربر درباره gps موقعیت کاربر رو بگیرید و در قسمت lat و lng کدی که زدم اون رو جایگزین کنید.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام