ساعت پشتیبانی: 8 الی 16 روزهای کاری (گفتگوی آنلاین)
نوشتن یک نظر

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

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

 

راهنمای جایگزینی نقشه پارسی جو به جای نقشه گوگل با google API

 

 

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

کد زیر مربوط به نمایش نقشه گوگل با استفاده از API گوگل می باشد که از سایت w3schools.com استخراج شده است. مشاهده صفحه

<!DOCTYPE html>
 <html>
 <body>
  <h1>My First Google Map</h1>
  <div id="googleMap" style="width:100%;height:400px;"></div>
  <script>
 function myMap() {
 var mapProp= {
     center:new google.maps.LatLng(51.508742,-0.120850),
     zoom:5,
 };
 var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
 }
 </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&amp;callback=myMap"></script>
  </body>
 </html>

برای نمایش نقشه پارسی جو کافی است گام های زیر را انجام دهید: 

گام اول:  در کدهای خود قطعه کد زیر را بیابید:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

سپس با کد زیر جایگزین کنید:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

حال قطعه کد اصلاح شده را به ابتدای تگ body منتقل میکنیم.

<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

گام دوم:  در کدهای خود قطعه کد زیر را بیابید:

function myMap() {
var mapProp= {

سپس با کد زیر جایگزین نمایید:

var element = document.getElementById("googleMap");
var map= new google.maps.Map(element, {

گام سوم:  در کدهای خود قطعه کد زیر را بیابید:

zoom:5,
};

سپس با کد زیر جایگزین نمایید:

zoom:5,
mapTypeId: "ParsijooMap",
mapTypeControl: false,
streetViewControl: false
});

گام چهارم: در کدهای خود قطعه کد زیر را بیابید:

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

سپس با کد زیر جایگزین نمایید:


//Define Parsijoo map type pointing at the ParsijooMap tile server
  map.mapTypes.set("ParsijooMap", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// "Wrap" x (logitude) at 180th meridian properly
var tilesPerGlobe = 1 << zoom;
var x = coord.x % tilesPerGlobe;
if (x < 0) {
  x = tilesPerGlobe+x;
}
  // Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll
  return "https://developers.parsijoo.ir/web-service/v1/map/?type=tile"+"&" +"x=" + x + "&" +"y=" + coord.y + "&" +"z=" + zoom +"&" + "apikey=b79aa829a62541e1897c1fcc2807a177";
},
 tileSize: new google.maps.Size(256, 256),
name: "ParsijooMap",
maxZoom: 18
}));

 توجه: در بخش "apikey=" به جای متن مشخص شده کلیدapi  دریافتی از پارسی جو را وارد نمایید. (راهنمای دریافت API Key)

 توجه: در صورت عدم استفاده از API Key اختصاصی خود، ممکن است نمایش نقشه در وب سایت شما با اختلال مواجه شود.

 

گام پنجم: در انتها اسکریپت زیر را وارد نمایید:

<script type="text/javascript">
Object.defineProperty(HTMLScriptElement.prototype, "__src__", Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, "src"));
Object.defineProperty(HTMLScriptElement.prototype, "src", {
configurable: true, 
enumerable: true, 
get() { 
return this.__src__; 
},
set(new_src) { 
if (!new_src || !(new_src.startsWith("https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate") ||
new_src.startsWith("https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent"))) 
this.__src__ = new_src; 
}
});
</script>

 

نظری بنویسید...
ورود با
یا ارسال به عنوان یک مهمان
افراد در بحث:
Loading comment... The comment will be refreshed after 00:00.
We use cookies to improve our website. By continuing to use this website, you are giving consent to cookies being used. More details…