地理定位 api 和谷歌地图中的错误

Question

我不知道我的代码有什么问题，我已经在括号中构建它并且它有效，但是当我进入 Visual Studio 时，它告诉我他无法使用 Google Developer 更精确地读取纬度属性工具我得到这个“未捕获的类型错误：无法读取未定义的属性'纬度'”

<script>
            $(document).ready(function(){
                getLocation();
            });
            function getLocation(){
                if(navigator.geolocation){
                    navigator.geolocation.getCurrentPosition(initialize);
                }else{
                    x.innerHTML = "Geolocation is not supported by this browser.";
                }
            }

            function initialize(position){
                var mapCanvas = document.getElementById('map-canvas');
                var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                var mapOptions = {
                    center: myLatLng ,
                    zoom: 18,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(mapCanvas, mapOptions);
                map.set('styles', [
                    {
                        featureType: 'road',
                        elementType: 'geometry',
                        stylers:[
                            {color: '#C4C4C4'},
                            {weight: 0.6}
                        ]
                    },
                    {
                        featureType: 'road',
                        elementType: 'labels',

                        stylers:[,
                            {saturation: -100},
                            {invert_lightness: false}
                        ]
                    }, 
                    {
                        featureType: 'landscape',
                        elementType: 'geometry',
                        stylers: [
                            { visibility: 'on' },
                            { hue: '#ffffff' },
                            { gamma: 1.4 },
                            { saturation: 82 },
                            { lightness: 80 }
                        ]
                    },
                    {
                        featureType: 'poi',
                        elementType: 'geometry',
                        stylers: [
                            { visibility: 'off' }
                        ]
                    }, 
                    {
                        featureType: 'poi.school',
                        elementType: 'geometry',
                        stylers: [
                            { visibility: 'off' },
                            { hue: '#fff700' },
                            { lightness: -15 },
                            { saturation: 99 }
                          ]
                    }
                ]);

                var iconBase = 'Images/';
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    icon: iconBase + 'romb.png',
                    map:map
                });
            }


            google.maps.event.addDomListener(window, 'load', initialize);
        </script>

更新！

再次查看我的代码后，我发现括号中有一个问题，我没有在 html 文档顶部使用 DOCTYPE 标记，但在 vs2013 中我已经使用了它，在我删除 vs2013 中的标记后也有效我已经删除了谷歌电话线。但现在我有另一个问题：为什么 DOCTYPE 标签不起作用？

感谢您的帮助， 奥雷利安！

Answer 1

你的问题是这一行：

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

它调用没有参数的初始化函数，并且没有纬度属性。

function initialize(position){

Answer 2

我认为您不会将位置变量传递回初始化函数。因此，当它尝试获取纬度和经度属性时，由于位置未定义，因此无法获取。

尝试更改此设置

navigator.geolocation.getCurrentPosition(initialize);

到这里

navigator.geolocation.getCurrentPosition(function(position) {
  initialize(position);
});