Question

我正在实施大学校园地图。

我试图在某些建筑物上设置颜色并在每个建筑物上添加事件。我试过使用标记，但它对我没用。

我有一个示例页面，提供了我想要做的事情。

http://maps.uottawa.ca/

知道他们是怎么做到的吗？

Answer 1

我认为你应该尝试使用多边形。创建形状可能需要一点时间，但结果可能类似。看我的例子：

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="initial-scale=1.0">
      <meta charset="utf-8">
      <title>Ottawa</title>
      <style>
         html, body {
         height: 100%;
         margin: 0;
         padding: 0;
         }
         #map {
         height: 600px;;
         width: 600px;
      </style>
   </head>
   <body>
      <div id="map"></div>
      <script>
        var map;
        var infowindow;
        var polyArr = [
            [   [
                    {lat: 45.4216323644096, lng: -75.679592192173}, 
                    {lat: 45.421722258490796, lng: -75.67935079336166},
                    {lat: 45.421029929177294, lng: -75.67869432270527},
                    {lat: 45.421176302703834, lng: -75.67835435271263},
                    {lat: 45.42096027218897, lng: -75.67815452814102},
                    {lat: 45.42071082416096, lng: -75.67878015339375}
                ], 
                '#800000', '#C0C0C0', '<div><h2>Advanced Research Complex (ARC)</h2><br>25 Tempelton Street</div>'
            ],
            [   [
                    {lat: 45.42114947542994, lng: -75.6796009093523},
                    {lat: 45.42078801197042, lng: -75.67929714918137},
                    {lat: 45.420673642190714, lng: -75.67935682833195},
                    {lat: 45.42061010332411, lng: -75.67929714918137},
                    {lat: 45.42055833086142, lng: -75.67939773201942},
                    {lat: 45.42049243856756, lng: -75.6793400645256},
                    {lat: 45.42044301929665, lng: -75.67946344614029},
                    {lat: 45.42051314758246, lng: -75.67952111363411},
                    {lat: 45.42050655835125, lng: -75.67953586578369},
                    {lat: 45.42052632604257, lng: -75.6795559823513},
                    {lat: 45.42045478579363, lng: -75.67973837256432},
                    {lat: 45.42051032362633, lng: -75.67974105477333},
                    {lat: 45.42051408890116, lng: -75.67976787686348},
                    {lat: 45.42054279911343, lng: -75.67976653575897},
                    {lat: 45.42054232845426, lng: -75.67974641919136},
                    {lat: 45.420644932045036, lng: -75.67973971366882},
                    {lat: 45.42075271268039, lng: -75.67983828485012},
                    {lat: 45.42076212582654, lng: -75.67983694374561},
                    {lat: 45.420867552956295, lng: -75.67992009222507},
                    {lat: 45.42094426989573, lng: -75.67974239587784},
                    {lat: 45.42088402592753, lng: -75.67968674004078}
                ], 
                '#800000', '#C0C0C0', '<div><h2>Power Plant (CTE)</h2><br>720 King Edward</div>'
            ]
        ]; 
        function initMap() { 
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 17,
                center: {lat: 45.42118901035543, lng: -75.67925691604614},
                draggableCursor: 'crosshair'
            });
            infowindow = new google.maps.InfoWindow();
            for (i = 0; i < polyArr.length; i++) { 
                var pBuilding = new google.maps.Polygon({
                    paths: polyArr[i][0],
                    fillColor: polyArr[i][1],
                    fillOpacity: 0.9,
                    strokeColor: polyArr[i][2],
                    strokeColor: polyArr[i][2],
                    strokeOpacity: 0.8,
                    strokeWeight: 3
              });
              pBuilding.setMap(map);
                google.maps.event.addListener(pBuilding, 'click', (function(pBuilding, i) {
                    return function() {
                        infowindow.setPosition(polyArr[i][0][0]);
                        infowindow.setContent(polyArr[i][3]);
                        infowindow.open(map);
                    }
                    })(pBuilding, i));
            }

        }
      </script>
      <script async defer
         src="https://maps.googleapis.com/maps/api/js?callback=initMap">
      </script>
   </body>
</html>

Also here: https://jsfiddle.net/6y5a5bp9/

我希望它有所帮助！

谷歌地图api把事件放在建筑物上

1 个答案: