Gmaps.js添加地图标记？

Question

有人请告诉我如何使用Gmaps.js显示地图标记吗？我有地图工作，但无法得到标记，也许我需要一个API密钥？以下是文档：

https://hpneo.github.io/gmaps/examples/markers.html

$(document).ready(function(){

  var map;
  new GMaps({
    div: '#map',
    zoom: 14,
    lat: 22.018222,
    lng: -22.861022,
  });


  map.addMarker({
    lat: 22.018222,
    lng: -22.861022,
    title: "title",
    icon: 'blah',
    infoWindow: {
    content:'test'
    }
  });

});

Answer 1

您必须将新的GMaps对象分配给地图变量：

var map = new GMaps(....

Answer 2

发布的代码有两个问题。

1. 您没有将GMap对象分配给map变量。这会导致javascript错误：Uncaught TypeError: Cannot read property 'addMarker' of undefined

2. 字符串＆＃39; blah＆＃39;不是有效图标，因此一旦您有地图，标记就不会出现。

如果您不需要GMap对象的引用，则可以执行此操作：

new GMaps({
  div: '#map',
  zoom: 14,
  lat: 22.018222,
  lng: -22.861022,
}).addMarker({
  lat: 22.018222,
  lng: -22.861022,
  title: "title",
  // icon: 'blah',
  infoWindow: {
  content:'test'
  }
});

proof of concept fiddle



代码段

＆＃13;
＆＃13;
$(document).ready(function() {

  new GMaps({
    div: '#map',
    zoom: 14,
    lat: 22.018222,
    lng: -22.861022,
  }).addMarker({
    lat: 22.018222,
    lng: -22.861022,
    title: "title",
    // icon: 'blah',
    infoWindow: {
      content: 'test'
    }
  });

});
＆＃13;
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
＆＃13;
<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>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<div id="map"></div>
＆＃13;
＆＃13;
＆＃13;