Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > Client Script Forum > ช่วยหน่อยครับ จะสร้าง Mark ตำแหน่งปัจจุบันของผู้ใช้ โดยใช้ Google Map api เพิ่มจาก โค้ดในบทความนี้ ได้ยังไงครับ



 

ช่วยหน่อยครับ จะสร้าง Mark ตำแหน่งปัจจุบันของผู้ใช้ โดยใช้ Google Map api เพิ่มจาก โค้ดในบทความนี้ ได้ยังไงครับ

 



Topic : 112068



โพสกระทู้ ( 27 )
บทความ ( 0 )



สถานะออฟไลน์




ตอนนี้ผมกำลังสร้างแผนที่อยู่ครับ โดยใช้บทความนี้เป็นตัวอย่าง

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
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-10-21 01:52:26 By : Naite View : 1191 Reply : 1
 

 

No. 1



โพสกระทู้ ( 27 )
บทความ ( 0 )



สถานะออฟไลน์


จะมีอัศวินขี่ม้าขาวมาช่วยไหมหนอ...






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-10-21 11:56:56 By : Naite
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ช่วยหน่อยครับ จะสร้าง Mark ตำแหน่งปัจจุบันของผู้ใช้ โดยใช้ Google Map api เพิ่มจาก โค้ดในบทความนี้ ได้ยังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่