谷歌地图标记不会显示

Google map markers are not displayed

本文关键字：显示 地图 图标 谷歌      更新时间：2023-09-26

我正在显示带有标记的谷歌地图。我制作了一个名为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);

    }
}


$(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>

您必须定义新的标记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>
相关文章：