bftarane
شنبه 01 آذر 1393, 16:45 عصر
سلام.
من می خوام داروخانه های ایران رو به صورت لینک نمایش بدم و کاربر روی هر کدام که کلیک کرد با استفاده از عرض و طول جغرافیایی محل مورد نظر داروخانه به صورت نقشه گوگل نمایش داده بشه.
این مثال رو پیدا کردم.
http://www.aspsnippets.com/Articles/Google-Maps-V3-Display-Colored-Markers-for-particular-type-of-location.aspx
و با یک مقدار دستکاری نتیجه شده صفحه زیر:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
{
"title": 'داروخانه',
"lat": '35.715715',
"lng": '51.422528',
"description": 'داروخانه',
"type": 'pharmacy'
}
];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function () {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "pharmacy":
icon = "red";
break;
}
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</td>
<td valign="top">
<u>Legend:</u><br />
<img alt="" src="http://maps.google.com/mapfiles/ms/icons/red.png" />
داروخانه ها<br />
</td>
</tr>
</table>
</form>
</body>
</html>
ولی مسئله اینجاست که وقتی کلمه داروخانه رو جستجو می کنم در سایت گوگل مپ به شکل زیر نمایش داده میشه
(حالت 1)
125936
ولی وقتی برنامه خودم رو اجرا می کنم به شکل زیر
125937
اگه دقت کنید یه مقدار تفاوت می بینید، یعنی مارکر در حالت 1 دقیقاً روی اون علامت جعبه کمک های اولیه قرار داره و همچنین مکانش هم به خیابان خردمند نزدیکتره.
دلیل این تفاوت چیه؟
چون من طول و عرض جغرافیایی رو از همون نقشه گوگل به دست آوردم بنابراین نباید تفاوتی وجود داشته باشه.
من می خوام نتیجه اجرای برنامه من هم مثل ( حالت 1) باشه.
لطفاً راهنمایی کنید.
ممنون می شم راهنمایی کنید.
من می خوام داروخانه های ایران رو به صورت لینک نمایش بدم و کاربر روی هر کدام که کلیک کرد با استفاده از عرض و طول جغرافیایی محل مورد نظر داروخانه به صورت نقشه گوگل نمایش داده بشه.
این مثال رو پیدا کردم.
http://www.aspsnippets.com/Articles/Google-Maps-V3-Display-Colored-Markers-for-particular-type-of-location.aspx
و با یک مقدار دستکاری نتیجه شده صفحه زیر:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
{
"title": 'داروخانه',
"lat": '35.715715',
"lng": '51.422528',
"description": 'داروخانه',
"type": 'pharmacy'
}
];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function () {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "pharmacy":
icon = "red";
break;
}
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</td>
<td valign="top">
<u>Legend:</u><br />
<img alt="" src="http://maps.google.com/mapfiles/ms/icons/red.png" />
داروخانه ها<br />
</td>
</tr>
</table>
</form>
</body>
</html>
ولی مسئله اینجاست که وقتی کلمه داروخانه رو جستجو می کنم در سایت گوگل مپ به شکل زیر نمایش داده میشه
(حالت 1)
125936
ولی وقتی برنامه خودم رو اجرا می کنم به شکل زیر
125937
اگه دقت کنید یه مقدار تفاوت می بینید، یعنی مارکر در حالت 1 دقیقاً روی اون علامت جعبه کمک های اولیه قرار داره و همچنین مکانش هم به خیابان خردمند نزدیکتره.
دلیل این تفاوت چیه؟
چون من طول و عرض جغرافیایی رو از همون نقشه گوگل به دست آوردم بنابراین نباید تفاوتی وجود داشته باشه.
من می خوام نتیجه اجرای برنامه من هم مثل ( حالت 1) باشه.
لطفاً راهنمایی کنید.
ممنون می شم راهنمایی کنید.