javascript - 谷歌地图标记不显示

Question

我正在显示带有标记的谷歌地图。我做了一个名为 loadmap() 的函数；当我将此函数放入 '$(document).ready(function () {})' 中时，它可以正常工作。但是，当我在按钮单击事件上调用相同的函数时，不会加载标记。请给我任何建议。

<script type="text/javascript">

var map;
var data = '@Model.LatLongList';
var markers = eval(JSON.parse(data.replace(/&quot;/g, '"')));
var radiusRange = "";
var letter = "";
var myLatlng = "";
var marker = "";
var infoWindow;
var zoomLevel = 10;
$(document).ready(function () {
    debugger;
    var mapOptions = {
        center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    infoWindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById("mapSerachResult"), mapOptions);
    //google.maps.event.addListener(map, 'idle', loadmap);
});

function loadmap() {

    $("#tblSearchList").hide();
    //document.getElementById('mapSerachResult').style.display = "block";
    google.maps.event.trigger(map, 'resize');
    debugger;
    for (i = 0; i < markers.length; i++) {
        letter = String.fromCharCode("A".charCodeAt(0) + i);
        data = markers[i];
        myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.PanelGroupName,
            icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
        });

        (function (marker, data) {
            google.maps.event.addListener(marker, "mouseover", function (e) {

            })

        })
    (marker, data);


    }
}

Answer 1

$(document).ready(function () {

var image = 'http://www.franhaines.co.uk/thebellinn/wp-content/themes/starkers-master/images/marker.png';

var myLatLng = new google.maps.LatLng(52.780761, -2.199389);

var mapOptions = {
    zoom: 12,
    center: myLatLng
};

var map = new google.maps.Map($('#mapCanvas').get(0), mapOptions);

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

要显示标记，您必须定义标记。

html, body, #mapCanvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

并包括以下内容:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapCanvas" style="border: 2px solid #3872ac;"></div>