Question

我创建了一个包含Google Maps API的网站。如果用户单击多边形，则会显示一条消息。它适用于点击，因此用户必须在Polygon区域内或之外单击，但我想根据用户当前位置在页面加载时进行。

是否可以在页面加载时触发下面的功能？

google.maps.event.addListener(map, 'click', function (event) {
        if (boundaryPolygon!=null && boundaryPolygon.Contains(event.latLng)) {
            document.getElementById('result').innerHTML = 'You live in this area.';
        } else {
            //alert(event.latLng + " Du bist ein Ossi!");
            document.getElementById('result').innerHTML = 'You live outside this area.';
        }

    });
}

Answer 1

您可以像这样触发地图上的点击事件（其中latLng属性是点击的位置）：

google.maps.event.trigger(map, 'click', {
  latLng: new google.maps.LatLng(24.886, -70.268)
});

proof of concept fiddle

代码段

＆＃13;

// polygon example from: https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 24.886,
      lng: -70.268
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [{
    lat: 25.774,
    lng: -80.190
  }, {
    lat: 18.466,
    lng: -66.118
  }, {
    lat: 32.321,
    lng: -64.757
  }, {
    lat: 25.774,
    lng: -80.190
  }];

  // Construct the polygon.
  var boundaryPolygon = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    clickable: false
  });
  boundaryPolygon.setMap(map);
  google.maps.event.addListener(map, 'click', function(event) {
    if (boundaryPolygon != null && google.maps.geometry.poly.containsLocation(event.latLng, boundaryPolygon)) {
      document.getElementById('result').innerHTML = 'You live in this area.';
    } else {
      document.getElementById('result').innerHTML = 'You live outside this area.';
    }
  });
  google.maps.event.trigger(map, 'click', {
    latLng: new google.maps.LatLng(24.886, -70.268)
  });
}

＆＃13;

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

＆＃13;

<div id="result"></div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap">
</script>

＆＃13;

Javascript - 触发器单击页面加载

1 个答案: