Google地图API在HTML5地理位置给定LatLng线时显示空白地图 [英] Google maps API showing blank map when given LatLng cords from HTML5 Geolocation

问题描述

我正在尝试使用HTML5的地理位置功能。我有一个函数来获取坐标，然后使用另一个函数在调用Google Maps API时使用这些坐标。如果我手动指定纬度和经度，它的效果很好，但出于某种原因，它不能以这种方式工作，我只是得到一张空白的地图，控件在那里，但没有实际的地图。我相信代码是正确的，但也许我忽略了一些东西。

I'm trying to use HTML5's geolocation features. I have a function to get the coordinates and then another to use those coordinates in a call to the Google Maps API. If I manually specify the Latitude and Longitude it works great, but for some reason it doesn't work this way, I just get an empty map, controls are there, but no actual map. I believe the code is correct, but maybe I overlooked something.

以下是代码：

Here's the code:

var x = document.getElementById("msg");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        }
        else { x.innerHTML = "Geolocation is not supported by this browser."; }
    }

    function showPosition(position) {
        var mapOptions = {
            center: new google.maps.LatLng(position.coords.latitude + ", " + position.coords.longitude),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("Map"), mapOptions);
        var acOptions = {
            types: ['establishment']
        };
        var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), acOptions);
        autocomplete.bindTo('bounds', map);
        var infoWindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
            map: map
        });

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            infoWindow.close();
            var place = autocomplete.getPlace();
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }
            marker.setPosition(place.geometry.location);
            infoWindow.setContent('<div><strong>' + place.name + '</strong><br />');
            infoWindow.open(map, marker);
            google.maps.event.addListener(marker, 'click', function (e) {

                infoWindow.open(map, marker);

            });
        });

        var x = document.getElementById("msg");
        x.innerHTML = position.coords.latitude + ", " + position.coords.longitude;
    }

    function showError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML = "An unknown error occurred."
                break;
        }
    }
    google.maps.event.addDomListener(window, 'load', getLocation);

推荐答案

LatLng 构造函数需要2个参数（和一个可选的第三个）数字1纬度和其他经度，一个字符串。

The LatLng constructor takes 2 arguments(and an optional third) both numeric one latitude and the other longitude, not both concatenated together as a string .

center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),

这篇关于Google地图API在HTML5地理位置给定LatLng线时显示空白地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！