Google Maps API：在 JavaScript API 中使用我自己的坐标答案

【问题标题】：Google Maps API: Use my own coords in JavaScript APIGoogle Maps API：在 JavaScript API 中使用我自己的坐标
【发布时间】：2012-08-01 05:00:15
【问题描述】：

我能够获得自己的经度和纬度并将它们保存到变量中：

var myLat = position.coords.latitude;
var myLong = position.coords.longitude;

我只是不确定如何将它们传递给在屏幕上显示地图初始位置的代码：

 function initialize() {
                    var mapOptions = {
                        center: new google.maps.LatLng(-34.397, 150.644),
                        zoom: 4,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                                  mapOptions);
                }

我需要将 myLat 和 myLong 输入该行：

center: new google.maps.LatLng(-34.397, 150.644)

我只是不知道该怎么做。谁能指出我正确的方向？

编辑：根据以下要求添加完整代码

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR KEY HERE&sensor=true"></script>

    <script type="text/javascript">

        //MAP
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map_canvas"),
                                  mapOptions);
        }

        //GEOLOCATION
    var onSuccess = function(position) {
        alert('Latitude: '  + position.coords.latitude   + '\n' +
              'Longitude: ' + position.coords.longitude  + '\n');

        var myLat = position.coords.latitude;
        var myLong = position.coords.longitude;

       map.setCenter(new google.maps.LatLng(myLat, myLong)) 


    };

    // onError Callback receives a PositionError object
    //
    function onError(error) {
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }

    navigator.geolocation.getCurrentPosition(onSuccess, onError);

</script>

还有 HTML：

<body onload="initialize()">

 <div id="map_canvas" style="width:300px; height:400px;"></div>

</body

【问题讨论】：

你为什么不能只做new google.maps.LatLng(myLat, myLng)？

标签： javascript google-maps google-maps-api-3

【解决方案1】：

这不起作用的原因是由于以下功能

var onSuccess = function(position) {

    alert('Latitude: '  + position.coords.latitude   + '\n' +
          'Longitude: ' + position.coords.longitude  + '\n');

    var myLat = position.coords.latitude;
    var myLong = position.coords.longitude;

    map.setCenter(new LatLng(myLat, myLong));
};

当你使用

map.setCenter(new LatLng(myLat, myLong))

你必须使用

map.setCenter(new google.maps.LatLng(myLat, myLong))

LatLng 对象将未定义。您需要使用的对象是 google.maps.LatLng。

【讨论】：

啊，是的，很好用（有点……我的应用程序崩溃了，但我认为这将是一个不同的问题）谢谢！

【解决方案2】：

只是

var map;
function initialize() {
    //...
}

initialize();

function initiate_geolocation() {  
    navigator.geolocation.getCurrentPosition(onSuccess);
}  

function onSuccess(position){  
    var myLat = position.coords.latitude;
    var myLong = position.coords.longitude;
    map.setCenter(new google.maps.LatLng(myLat, myLong)); // edit this line
}
initiate_geolocation();

不是map.setCenter(new LatLng(myLat, myLong));，而是map.setCenter(new google.maps.LatLng(myLat, myLong));

DEMO.

【讨论】：

谢谢 - 我试过了，它似乎不适合我。还尝试将 myLat 和 myLong 也放在那里
你的 myLat, myLong 包含什么？
完整的经纬度数字

【解决方案3】：

您可以简单地将 myLat 和 myLong 作为构造函数参数传递给 google.maps.LatLng。所以你的代码应该是这样的：

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(myLat,myLong),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}

【讨论】：

谢谢，我也试过了。如果这样更容易，我已经添加了上面的完整代码