javascript - 根据用户点击的位置在多边形内添加标记

Question

根据用户在 polgyon 内单击的位置，我显示一个信息窗口。这是通过向多边形添加单击事件监听器来完成的:

bermudaTriangle.addListener('click', function(event) {
    var anchor = new google.maps.MVCObject();
    anchor.set("position", event.latLng);
    infowindow.open(map, anchor);
});

有什么方法可以在使用 event.latLng 检索的 anchor 处显示标记图标？如果我创建 new google.maps.Marker 而不是 new google.maps.MVCObject，那么 infoWindow 将在多边形外部打开，并且会偏离。

示例:http://jsfiddle.net/2qyhkkok/

Answer 1

使用标记作为信息窗口的 anchor 对我来说很有效:

var map;
var marker;
var infowindow = new google.maps.InfoWindow();

function initialize() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var bermudaTriangle;

    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)];

    bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });

    bermudaTriangle.setMap(map);

    bermudaTriangle.addListener('click', function (event) {
        if (marker && marker.setPosition) {
          marker.setPosition(event.latLng);
          } else {
          marker = new google.maps.Marker({position: event.latLng,map:map});
            }
        infowindow.setContent("Hello, world.");
        // var anchor = new google.maps.MVCObject();
        // anchor.set("position", event.latLng);
        infowindow.open(map, marker);
    });

}

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

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>