نصب نقشه فارسی در React Native
سلام و عرض ادب
می خواستم یه نقشه فارسی روی اپلیکیشن فروشگاه اینترنتی نصب کنم که موقعیت کاربر رو از طریق نقشه بگیره و ذخیره کنه (موقع وارد کردن آدرس محل سکونت)
یکی دو تا از این نقشه فارسی ها رو نصب کردم ولی دیگه پروژه اجرا نشد و ارور داد. نسخه ی ری اکت نیتیو هم 59.9 هستش
شما نقشه ای سراغ دارین بدون مشکل بشه نصب و استفاده کرد؟
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
@mahdi.darzi
سلام دوست عزیز شما میتونید با وب ویو یک کامپوننت درست کنید و بزارید تو برنامتون و ازش به عنوان نقشه استفاده کنی
اگه کدش رو خواستید من قبلا نوشتم بگین براتون بفرستم.چون معمولا نقشه های فارسی کامپوننت برای ری اکت نیتیو نداره و یا اگه هست با نسخه هاش مشکل داره
یعنی با همین وب ویو کاربر میتونه لوکیشنش رو انتخاب کنه و بعد از پایان درگ کردن روی نقشه، مختصات رو بهش برگردونه؟
@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 }} /> ببخشید این متد کجا تعریف شده؟
this.getLatlng(this.latlng);
و دیگه اینکه مگر نباید وقتی نقشه رو اسکرول می کنیم یا در جایی از اون کلیک می کنیم مارکر بره همونجا؟
قبل یا بعد از این کدهایی که دادین جایی چیز دیگه ای نباید تعریف کنیم؟
مقدار اولیه اینها رو چی باید بدم؟
this.lat1 = this.props.lat1;
this.lng1 = this.props.lng1;
this.lat2 = this.props.lat2;
this.lng2 = this.props.lng2;@khosravi424
سلام وقت بخیر
ممنون از شما آقای خسروی عزیز بابت کدی که قرار دادید کمک بزرگی به بنده کردید 🙏🙏🙏
من تنظیمات لوکیشن رو انجام دادم و توی نسخه دیباگ اپ روی موبایل با باز شدن نقشه درخواست فعال سازی لوکیشن میاد و همه مواردی که نیاز کارم بوده مثل لوکیشن های مورد نظر و لوکیشن جاری به درستی کار می کنه اما وقتی خروجی apk رو می گیرم و نصبش می کنم و وارد نقشه می شم درخواست فعالسازی gps نمیاد خودم هم که gps رو فعال می کنم انگار تنظیمات نقشه متوجه فعالسازی نمی شه و لوکیشن جاری رو نمایش نمی ده
ممنون می شم اگر در این زمینه تجربه ای دارید در اختیار بنده بذارید🌹🌹
@nil.rezaee88
سلام شما میتوانید پس از اجازه گرفتن از کاربر درباره gps موقعیت کاربر رو بگیرید و در قسمت lat و lng کدی که زدم اون رو جایگزین کنید.