Question

我有一个带有kml图层的谷歌地图。 KML图层上有几个标记。到目前为止，我已经设法在点击时将一个按钮插入到kml图层信息窗口中。我正在尝试在单击它的位置添加标记。没有kml层，我可以做得很好。我的点击事件调用“addMarker”函数来放置标记。我在infowindow中有一个按钮，当点击时，应该在该点添加一个标记。

这就是我到目前为止所做的：

google.maps.event.addListener(layers[1], 'click', function(kmlEvent) {
var text = kmlEvent.featureData.name;
kmlEvent.featureData.infoWindowHtml += '<br/><button onclick="kmladd()" class="btn btn-success btn-sm">Add to Route</button>';
showInContentWindow(text);
});

function kmladd(){
addMarker(kmlEvent.latLng);
}

function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
}  

function addMarker(location) {

 var marker = new google.maps.Marker({
  map: map,
  position: location,
  draggable:true,
  icon: getMarkerIcon()
});
marker.identifier = 'waypoint_'+currentIndex;

 markers.push(marker);
}

我收到“未捕获的ReferenceError：没有定义kmladd”错误。是否可以在infowindow的按钮上调用函数？

非常感谢任何协助。

Answer 1

kmladd函数需要位于全局命名空间中才能用作HTML onclick函数。

proof of concept fiddle

代码段

var lastKmlEvent;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {
      lat: 41.876,
      lng: -87.624
    }
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });
  google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
    lastKmlEvent = kmlEvent;
    var text = kmlEvent.featureData.name;
    kmlEvent.featureData.infoWindowHtml += '<br/><button onclick="kmladd()" class="btn btn-success btn-sm">Add to Route</button>';
  });
}

function addMarker(latLng) {
  var marker = new google.maps.Marker({
    position: latLng,
    title: latLng.toUrlValue(6),
    map: map
  });
}

function kmladd() {
  addMarker(lastKmlEvent.latLng);
}
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Google地图 - 如何通过infowindow中的按钮调用函数？

1 个答案: