Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>P.0版-畫多邊形</title>
    <!--【P.0版】主架構參考Simple Polygon https://developers.google.com/maps/documentation/javascript/examples/polygon-simple -->
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 50%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="msg"></div>    
    
    <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: {lat: 24.121517, lng: 120.675553},
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });
​
      // Define the LatLng coordinates for the polygon's path. 套用資料來自於【1.1版】的一組座標格式
      var polyCoords = [{lng: 120.6754891, lat: 24.1236512}, {lng: 120.6754878, lat: 24.1228667}, {lng: 120.675703, lat: 24.1228673}, {lng: 120.675703, lat: 24.1228422}, {lng: 120.6758116, lat: 24.1228416}, {lng: 120.6758116, lat: 24.1228673}, {lng: 120.6759417, lat: 24.1228673}, {lng: 120.6759424, lat: 24.1228403}, {lng: 120.6761865, lat: 24.1228403}, {lng: 120.6761865, lat: 24.1228642}, {lng: 120.6764467, lat: 24.1228654}, {lng: 120.6764453, lat: 24.1230258}, {lng: 120.676499, lat: 24.1230258}, {lng: 120.6765016, lat: 24.1234982}, {lng: 120.6764534, lat: 24.1234982}, {lng: 120.6764534, lat: 24.1236463}, {lng: 120.6761905, lat: 24.1236488}, {lng: 120.6761905, lat: 24.1236708}, {lng: 120.6759397, lat: 24.1236733}, {lng: 120.6759384, lat: 24.1236476}, {lng: 120.6758089, lat: 24.1236488}, {lng: 120.6758096, lat: 24.1236738}, {lng: 120.6756956, lat: 24.1236745}, {lng: 120.6756956, lat: 24.1236512}, {lng: 120.6754891, lat: 24.1236512}];
​
      // Construct the polygon.
      var building = new google.maps.Polygon({
        paths: polyCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
      });
      building.setMap(map);
      
      // 將監聽事件獨立成一個函式執行
      listenPolygon(building);
    }
    
    // 將監聽事件獨立成一個函式執行
    function listenPolygon(building) {
      // 下列監聽事件語法參考自 http://stackoverflow.com/questions/12828044/?answertab=votes#tab-top
      google.maps.event.addListener(building,'click',function(evt) {
        document.getElementById("msg").innerHTML = evt.latLng.lat() + ', ' + evt.latLng.lng();
      });
    }
​
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
  </body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers