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>

Answer 2

您必须定义标记为新的google.maps.Marker（）

   <style>
          #map-canvas {
            height: 689px;
            width:740px;
            margin: 0px;
            padding: 0px
          }
     </style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
 <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(44.016521,21.005859);
  var mapOptions = {
    zoom: 7,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

/*--------------------------------------------*/      
    var Pin = new google.maps.Marker({
        position: new google.maps.LatLng(44.655501,20.267407),
        map: map,
        title: 'Hello World!'
    });  
}

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

</script>

不会显示Google地图标记

2 个答案: