Google maps API - 客户当前位置的中心地图-前端问题

Google maps API - Center map on client#39;s current location(Google maps API - 客户当前位置的中心地图)

本文介绍了Google maps API - 客户当前位置的中心地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经查看了这个问题被问到的各种其他时间，但我不能完全指出我哪里出错了，这是我的代码:

I've looked at the various other times this question has been asked but I can't quite put a finger on where I'm going wrong, here's my code:

<html>
<head>
    <title> Map </title>
    <style>
        html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 500px;
        width: 800px;}
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        function initialize()
        {
            var myLatlng1 = new google.maps.LatLng(53.65914, 0.072050);

            var mapOptions = 
            {
                zoom: 10,
                center: myLatlng1,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);


            <?php
                $sql = mysql_query("SELECT * FROM data ORDER BY ID DESC");
                while($row =mysql_fetch_array($sql))
                {
                    $desc = $row['DESCRIPTION'];
                    $location = $row['LOCATION'];
                    $counter += 1; 
                ?>

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(<?php echo $location; ?>),
                map: map,
                title: '<?php echo $desc; ?>',
                icon: '/image/cam.png'
            });

           navigator.geolocation.getCurrentPosition(showPosition);  
        }

        var showPosition = function (position) 
           {
               map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 16);

           }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>

它最初将中心设置为myLatlng1，而底部将其设置为用户当前位置的代码没有做任何事情，有什么想法吗?

It originally sets the center to myLatlng1, and the code at the bottom to set it to the user's current location doesn't do anything, any ideas?

提前致谢.

推荐答案

尝试使用以下代码获取用户当前位置(GEOLOCATION):

Try using the below code to get the user's current location (GEOLOCATION):

 if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function (position) {
         initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
         map.setCenter(initialLocation);
     });
 }

为了展示一个例子，我删除了你的 php 代码.检查这个 JSFiddle

For showing an example, I've removed your php code. Check this JSFiddle

希望你能理解.

这篇关于Google maps API - 客户当前位置的中心地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！