|
 |
| |
ช่วยหน่อยครับ จะสร้าง Mark ตำแหน่งปัจจุบันของผู้ใช้ โดยใช้ Google Map api เพิ่มจาก โค้ดในบทความนี้ ได้ยังไงครับ |
| |
 |
|
|
 |
 |
|
ตอนนี้ผมกำลังสร้างแผนที่อยู่ครับ โดยใช้บทความนี้เป็นตัวอย่าง
https://www.thaicreate.com/community/googlemap-v3-from-mysql.html
ตอนนี้ทำในส่วนของมาร์คทั่วไปและเชื่อมกับดาต้าเบสได้แล้ว
แต่ยังติดในส่วนของมาร์คตำแหน่งปัจจุบันของผู้ใช้ครับ
ลองดูหลายๆเว็ปหลายๆตัวอย่าง แต่ก็ทำไม่ได้สักที...
รบกวนพี่ๆ เพื่อนๆช่วยแนะนำ + โค้ดเป็นตัวอย่าง หน่อยครับ
งมมาหลายวันแล้ว T-T
( มือใหม่ครับ )
นี่เป็นโค้ดที่ผมลองทำตามตัวอย่างครับ
Code
<?php
$dbserver = 'localhost';
$dbuser = 'root';
$dbpass = "1234";
$dbname = 'car';
error_reporting(E_ALL ^ E_NOTICE);
mysql_connect($dbserver, $dbuser, $dbpass) or die("เชื่อมต่อฐานข้อมูลไม่ได้ ");
mysql_select_db($dbname) or die("เลือกฐานข้อมูลไม่ได้"); // เลือกฐานข้อมูล
mysql_query("SET NAMES UTF8");
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.img_left{ float:left; margin-right:5px; margin-bottom:5px; border:1px dotted #999999; background-color:#f2f2f2; padding:2px;}
.cls{ clear:both;}
.font_map{ font-family:Tahoma, Arial, serif; font-size:13px;}
div#map_canvas { width:100%; height:100%; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script type="text/javascript" src="http://www.cyberthai.net/gmap3.js"></script>
<script type="text/javascript">
$(function myFunction() {
if (navigator.geolocation) {
// ตรงนี้คือรองรับ geolocation
navigator.geolocation.getCurrentPosition(function (location) {
var location = location.coords;
var lat = location.latitude;
var long = location.longitude;
$("#geo_data").html('lat: '+ location.latitude + '<br />long: ' + location.longitude);
}, function () {
alert('มีปัญหาในการตรวจหาตำแหน่ง');
});
$('#map_canvas').gmap3({
map: {
options: {
center: [13.916945, 100.541338],
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
}
},
marker: {
values: [
{latLng: [13.916945, 100.541338], data: "<div class='font_map'><img src=' echo $r[Pic] ' width='75' height='75' alt=' echo $r[Place_name] ' class='img_left' /><strong><a href='#' title='echo $r[Place_name]' target='_blank'>echo $r[Place_name]</a></strong><br /><br />echo $r[Address] <div class='cls'></div><a href='#' title='echo $r[Place_name] ' target='_blank'>ดูที่เหลือ</a></div>", options: {icon: "http://png-3.findicons.com/files/icons/2469/brushed_metal_icons/64/marker_02.png"}},
<?php
$sql = mysql_query("select * from place");
$num = mysql_num_rows($sql);
if ($num > 0) {
while ($r = mysql_fetch_array($sql)) {
++$i;
$i != $num ? $k = ',' : $k = '';
?>
{latLng:[<?php echo $r[Latitude] ?>, <?php echo $r[Longitude] ?>], data:"<div class='font_map'><img src='<?php echo $r[Pic] ?>' width='75' height='75' alt='<?php echo $r[Place_name] ?>' class='img_left' /><strong><a href='#' title='<?php echo $r[Place_name] ?>' target='_blank'><?php echo $r[Place_name] ?></a></strong><br /><br /><?php echo $r[Address] ?><div class='cls'></div><a href='#' title='<?php echo $r[Place_name] ?>' target='_blank'>ดูที่เหลือ</a></div>", options:{icon: "http://png-3.findicons.com/files/icons/2469/brushed_metal_icons/64/marker_02.png"}}<?php echo $k ?>
<?php
}
}
?>
],
events: {
mouseover: function (marker, event, context) {
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({
get: {
name: "infowindow"
}
});
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow: {
anchor: marker,
options: {
content: context.data
}
}
});
}
},
closeclick: function () {
infowindow.close();
},
mouseout: function () {
var infowindow = $(this).gmap3({
get: {
name: "infowindow"
}
});
}
}
}
});
} else {
alert('เบราเซอร์นี้ไม่รองรับ geolocation');
}
});</script>
</head>
<body onload="myFunction()">
ตำแหน่งของฉัน:
<div id="geo_data"></div>
<div id="map_canvas"></div>
</body>
</html>
Tag : HTML/CSS, JavaScript, Ajax, jQuery
|
ประวัติการแก้ไข
2014-10-21 02:03:00
|
 |
 |
 |
 |
| Date :
2014-10-21 01:52:26 |
By :
Naite |
View :
1273 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
จะมีอัศวินขี่ม้าขาวมาช่วยไหมหนอ...
|
| |
|
|
| |
| Date :
2014-10-21 11:56:56 |
By :
Naite |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
