Javascript 谷歌地图标记不显示

我已经尝试将一个标记变量添加到我的GoogleMapAPI中，但它不会显示出来。你知道为什么吗

网站：

问题

未定义myLatlng

在创建地图之前创建标记

即使已经创建了映射，也无法在创建标记的范围内访问映射实例（

map

）

地理位置回调将创建一个新的地图实例，标记将不会在此实例中绘制

固定问题：

function initialize() {

    var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: myLatlng
        }),
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "We are here!"
        });

    //use the button as control when you want to
    map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);

    function successCallback(position) {
        var latlng = new google.maps.LatLng(position.coords.latitude,
                                            position.coords.longitude),

            myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeControl: false,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            bounds = new google.maps.LatLngBounds(latlng);

        bounds.extend(marker.getPosition());

        //only set new options for the map
        //instead of creating a new instance
        map.setOptions(myOptions);

        //when you want to
        //set the viewport  of the map so that it diplays both locations
        map.fitBounds(bounds);

        //marker for the user-location when you want to
        new google.maps.Marker({
            position: latlng,
            map: map,
            title: "You are here!",
            icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
        });
    }

    function errorCallback() {
        alert("I'm afraid your browser does not support geolocation.");
    }

    function findMe() {
        //hide the button, no need for further clicks
        $(this).hide();

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
                timeout: 10000
            });
        } else {
            alert("I'm afraid your browser does not support geolocation.");
        }
    }

    $("#findButton").click(findMe);
}

演示：

---

还有另一个与CSS相关的问题（您可能已经注意到控件的外观被扭曲）。有关修复方法，请参见：

您正在调用

successCallback

函数，但实际上没有传递

position

参数，而

latlng

取决于

position

参数。我现在在中添加了position参数，但它仍然不起作用（尝试在

successCallback

内部添加标记。您在外部执行此操作，其中

map

未定义

ReferenceError:myLatlng未定义

尝试此

if（navigator.geolocation）{navigator.geolocation.getCurrentPosition（函数（位置）{successCallback（位置）；}

。另一件事是你正在使用

myLatlng

，你在

latlng

中保存了纬度和经度，所以你也需要更改它。非常感谢！我知道CSS问题，只是还没有来得及解决它。再次感谢你。将此添加到style.CSS:

映射img{max width:none；}

function initialize() {

    var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: myLatlng
        }),
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "We are here!"
        });

    //use the button as control when you want to
    map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);

    function successCallback(position) {
        var latlng = new google.maps.LatLng(position.coords.latitude,
                                            position.coords.longitude),

            myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeControl: false,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            bounds = new google.maps.LatLngBounds(latlng);

        bounds.extend(marker.getPosition());

        //only set new options for the map
        //instead of creating a new instance
        map.setOptions(myOptions);

        //when you want to
        //set the viewport  of the map so that it diplays both locations
        map.fitBounds(bounds);

        //marker for the user-location when you want to
        new google.maps.Marker({
            position: latlng,
            map: map,
            title: "You are here!",
            icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
        });
    }

    function errorCallback() {
        alert("I'm afraid your browser does not support geolocation.");
    }

    function findMe() {
        //hide the button, no need for further clicks
        $(this).hide();

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
                timeout: 10000
            });
        } else {
            alert("I'm afraid your browser does not support geolocation.");
        }
    }

    $("#findButton").click(findMe);
}