Question

我已尝试将标记变量添加到我的Google Map API中，但不会显示。有什么想法吗？

网站：http://www.franhaines.co.uk/paddlethewye/

function initialize() {
    var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 12, 
        center: new google.maps.LatLng(51.843143, -2.643555), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    });
    $("#findButton").click(findMe);}

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

function successCallback(position) { 
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
var map = new google.maps.Map(document.getElementById('map'), myOptions);
}

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"We are here!"
});

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

Answer 1

问题

myLatlng未定义
您在创建地图之前创建标记
即使已经创建了地图，也无法在创建标记的范围内访问地图实例（map）
geolocation-callback创建一个新的Map-instance，在这个实例中不会绘制标记

修正了问题：

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);
}

演示：http://jsfiddle.net/doktormolle/eb6kwkwg/

还有另一个与CSS相关的问题（你可能已经注意到控件的外观是扭曲的）。有关修复，请参阅：Google Map Infowindow not showing properly

Google地图标记无法显示

1 个答案: