Question

我编写了代码来在googlemap上显示标记。代码几乎是从Google API文档中逐字复制的。然而，标记没有显示在页面上。

这是我的代码：我做错了什么？

var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: central_location,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapCanvas, mapOptions);

}

google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function() {
  var infowindow = new google.maps.InfoWindow({
    content: '<div>Hello</div>'
  });

  var marker = new google.maps.Marker({
    position: central_location,
    map: map,
    title: 'This is the title'
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  marker.setMap(map);

});

#map {
  width: 500px;
  height: 380px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map"></div>

我注意到有类似的问题，我的问题似乎唯一不同的是我在jQuery ready（）事件中创建我的标记 - 而不是initialize（）函数。

这是标记未显示的原因吗？

注意：我不记得在Google API文档中阅读任何内容，指出在创建地图时应创建标记，因此显然不是这种情况

Answer 1

如何在没有加载地图的情况下制作标记。地图需要先初始化然后标记才能正常工作

function initialize() {
                    var mapCanvas = document.getElementById('map');
                    var mapOptions = {
                                          center: central_location,
                                          zoom: 14,
                                          streetViewControl: false,
                                          mapTypeId: google.maps.MapTypeId.ROADMAP
                                     }
                    map = new google.maps.Map(mapCanvas, mapOptions);

                    var marker = new google.maps.Marker({
                        position: central_location,
                        map: map,
                        title: 'This is the title'
                    });

                    marker.addListener('click', function () {
                        infowindow.open(map, marker);
                    });

                    marker.setMap(map);
             }

Answer 2

将您的标记创建移至initialize功能。

$(document).ready(function(){})在加载DOM元素时起作用，这并不一定意味着加载了地图。因此，如果您尝试在文档就绪函数中创建标记，则可能无法创建地图，一旦地图准备就绪map变量具有地图对象，因此您可以在其上创建标记，并且您可以加载地图后动态添加标记。

var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
  console.log('map loaded');
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: central_location,
    zoom: 14,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapCanvas, mapOptions);
  makePin(42.745334, 12.738430);
}

google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function(){
  console.log('document loaded');
})

function makePin(lat, long){
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, long),
    map: map,
    title: 'This is the title'
  });
  var infowindow = new google.maps.InfoWindow({
    content: '<div>Hello</div>'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

#map {
  width: 500px;
  height: 380px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
   
<button onclick="makePin(42.749334, 12.739430)">Add Pin</button>
<div id="map"></div>

Answer 3

以下是解决方案：

＆＃13;

var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: central_location,
    zoom: 14,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
    position: central_location,
    map: map,
    title: 'This is the title'
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  marker.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function() {
  var infowindow = new google.maps.InfoWindow({
    content: '<div>Hello</div>'
  });

});

＆＃13;

#map {
  width: 500px;
  height: 380px;
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map"></div>

＆＃13;

地图上未显示Google标记

3 个答案: