嵌入式地图上的断路和无法点击的位置

时间:2018-07-07 10:39:45

标签: google-maps

在嵌入式Google地图上以下URL处找到的路线已损坏,我希望它是连续的。

在同一张地图上找到的位置无法点击,我希望它们可以被点击。

在这里映射:https://www.theafricamonth.com/trail1-1或下面的代码。

非常感谢有人对此有所了解。预先感谢。

    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDTIfL5nxelK1h8HKkrUDkMn1emcLh-S4I&extension=.js"></script>
    <script src="//cdn.mapkit.io/v1/infobox.js"></script>
    <link href="//fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    <link href="//cdn.mapkit.io/v1/infobox.css" rel="stylesheet" >


    <script>
      google.maps.event.addDomListener(window, 'load', init);
        var map, markersArray = [];
        function bindInfoWindow(marker, map, location) {
          google.maps.event.addListener(marker, 'click', function() {
            function close(location) {
              location.ib.close();
              location.infoWindowVisible = false;
              location.ib = null;
            }
            if (location.infoWindowVisible === true) {
              close(location);
            } else {
              markersArray.forEach(function(loc, index) {
                if (loc.ib && loc.ib !== null) {
                  close(loc);
                }
              });
              var boxText = document.createElement('div');
              boxText.style.cssText = 'background: #fff;';
              boxText.classList.add('md-whiteframe-2dp');

              function buildPieces(location, el, part, icon) {
                if (location[part] === '') {
                  return '';
                } else if (location.iw[part]) {
                  switch (el) {
                    case 'photo':
                      if (location.photo) {
                        return '<div class="iw-photo" style="background-image: url(' + location.photo + ');"></div>';
                      } else {
                        return '';
                      }
                      break;
                    case 'iw-toolbar':
                      return '<div class="iw-toolbar"><h3 class="md-subhead">' + location.title + '</h3></div>';
                      break;
                    case 'div':
                      switch (part) {
                        case 'email':
                          return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span><a href="mailto:' + location.email + '" target="_blank">' + location.email + '</a></span></div>'
                          break;
                        case 'web':
                          return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span><a href="' + location.web + '" target="_blank">' + location.web_formatted + '</a></span></div>';
                          break;
                        case 'desc':
                          return '<label class="iw-desc" for="cb_details"><input type="checkbox" id="cb_details"/><h3 class="iw-x-details">Details</h3><i class="material-icons toggle-open-details"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><p class="iw-x-details">' + location.desc + '</p></label>';
                          break;
                        default:
                          return '<div class="iw-details"><i class="material-icons"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span>' + location.part + '</span></div>';
                          break;
                      }
                      break;
                    case 'open_hours':
                      var items = '';
                      if (location.open_hours.length > 0) {
                        for (var i = 0; i < location.open_hours.length; ++i) {
                          if (i !== 0) {
                            items += '<li><strong>' + location.open_hours[i].day + '</strong><strong>' + location.open_hours[i].hours + '</strong></li>';
                          }
                          var first = '<li><label for="cb_hours"><input type="checkbox" id="cb_hours"/><strong>location.open_hours[0].day</strong><strong>' + location.open_hours[0].hours + '</strong><i class="material-icons toggle-open-hours"><img src="//cdn.mapkit.io/v1/icons/keyboard_arrow_down.svg"/></i><ul>' + items + '</ul></label></li>';
                        }
                        return '<div class="iw-list"><i class="material-icons first-material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><ul>' + first + '</ul></div>';
                      } else {
                        return '';
                      }
                      break;
                  }
                } else {
                  return '';
                }
              }
              boxText.innerHTML = buildPieces(location, 'photo', 'photo', '') + buildPieces(location, 'iw-toolbar', 'title', '') + buildPieces(location, 'div', 'address', 'location_on') + buildPieces(location, 'div', 'web', 'public') + buildPieces(location, 'div', 'email', 'email') + buildPieces(location, 'div', 'tel', 'phone') + buildPieces(location, 'div', 'int_tel', 'phone') + buildPieces(location, 'open_hours', 'open_hours', 'access_time') + buildPieces(location, 'div', 'desc', 'keyboard_arrow_down');
              var myOptions = {
                alignBottom: true,
                content: boxText,
                disableAutoPan: true,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-140, -40),
                zIndex: null,
                boxStyle: {
                  opacity: 1,
                  width: '280px'
                },
                closeBoxMargin: '0px 0px 0px 0px',
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: 'floatPane',
                enableEventPropagation: false
              };
              location.ib = new InfoBox(myOptions);
              location.ib.open(map, marker);
              location.infoWindowVisible = true;
            }
          });
        }

        function init() {
          var mapOptions = {
            center: new google.maps.LatLng(-28.12333312723434, 23.738126687499967),
            zoom: 5,gestureHandling: 'auto',fullscreenControl: false,zoomControl: true,
            disableDoubleClickZoom: false,

            mapTypeControl: true,
            mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            },
            scaleControl: true,
            scrollwheel: true,
            streetViewControl: false,
            draggable: true,
            clickableIcons: true,
            fullscreenControlOptions: {
              position: google.maps.ControlPosition.TOP_RIGHT
            },
            zoomControlOptions: {
              position: google.maps.ControlPosition.RIGHT_BOTTOM
            },
            streetViewControlOptions: {
              position: google.maps.ControlPosition.RIGHT_BOTTOM
            },
            mapTypeControlOptions: {
              position: google.maps.ControlPosition.TOP_LEFT
            },

            mapTypeId: google.maps.MapTypeId.ROADMAP,

            styles: [{"featureType":"landscape","stylers":[{"hue":"#FFAD00"},{"saturation":50.2},{"lightness":-34.8},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFAD00"},{"saturation":-19.8},{"lightness":-1.8},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FFAD00"},{"saturation":72.4},{"lightness":-32.6},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FFAD00"},{"saturation":74.4},{"lightness":-18},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00FFA6"},{"saturation":-63.2},{"lightness":38},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#FFC300"},{"saturation":54.2},{"lightness":-14.4},{"gamma":1}]}]

          }
          var mapElement = document.getElementById('mapkit-6386');
          var map = new google.maps.Map(mapElement, mapOptions);
          var locations = [{"title":"Cape Town","address":"Cape Town, South Africa","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9248685,"lng":18.424055299999964,"photo":"","vicinity":"Cape Town","open_hours":"","marker":{"fillColor":"#F44336","fillOpacity":1,"strokeWeight":0,"scale":1.5,"anchor":{"x":10,"y":30},"origin":{"x":0,"y":0},"style":5},"iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Stellenbosch","address":"Stellenbosch, South Africa","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9321045,"lng":18.86015199999997,"photo":"","vicinity":"Stellenbosch","open_hours":"","marker":{"fillColor":"#F44336","fillOpacity":1,"strokeWeight":0,"scale":1.5,"anchor":{"x":10,"y":30},"origin":{"x":0,"y":0},"style":5},"iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Wilderness","address":"Wilderness, South Africa","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9940082,"lng":22.574848100000054,"vicinity":"Wilderness","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Port Elizabeth","address":"Port Elizabeth, South Africa","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9608369,"lng":25.602242299999943,"vicinity":"Port Elizabeth","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Two Rivers Rest Camp","address":"Botswana","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-26.4715622,"lng":20.6237251,"vicinity":"Botswana","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Orange River Lodge","address":"South Namibia, Namibia, Noordoewer, Namibia","desc":"","tel":"063 297 012","int_tel":"+264 63 297 012","email":"","web":"http://www.orangeriverlodge.com/","web_formatted":"orangeriverlodge.com","open":"","time":"","lat":-28.74396,"lng":17.616750000000025,"vicinity":"South Namibia, Namibia","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Windhoek","address":"Windhoek, Namibia","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-22.5608807,"lng":17.0657549,"vicinity":"Windhoek","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}}];

          for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
            icon: locations[i].marker,
            position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
            map: map,
            title: locations[i].title,
            address: locations[i].address,
            desc: locations[i].desc,
            tel: locations[i].tel,
            int_tel: locations[i].int_tel,
            vicinity: locations[i].vicinity,
            open: locations[i].open,
            open_hours: locations[i].open_hours,
            photo: locations[i].photo,
            time: locations[i].time,
            email: locations[i].email,
            web: locations[i].web,
            iw: locations[i].iw
          });

          markersArray.push(marker);

          if (locations[i].iw.enable === true){
            bindInfoWindow(marker, map, locations[i]);
          }
        }

        arrays = [];

        while (locations.length > 0) {
          arrays.push(locations.splice(0, 5));
        }

        for (var i = 0; i < arrays.length; i++) {
          makeRoutes(arrays[i]);
        }

        function makeRoutes(locations) {
          var waypts = [];
          var directionsService = new google.maps.DirectionsService();
          var directionsDisplay = new google.maps.DirectionsRenderer({
            suppressMarkers: true,
            preserveViewport: true
          });
          if (locations.length > 1){
            for (var i = 0; i < locations.length; i++) {
              waypts.push({
                location:new google.maps.LatLng(locations[i].lat, locations[i].lng),
                stopover:true
              });
            }
          }
          var request = {
            origin: new google.maps.LatLng(locations[0].lat, locations[0].lng),
            destination: new google.maps.LatLng(locations[locations.length - 1].lat, locations[locations.length - 1].lng),
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              polylineOptions = {
                strokeColor: '#80b8ea',
                strokeWeight: '6'
              }
              directionsDisplay.setOptions({
                polylineOptions: polylineOptions
              });
              directionsDisplay.setDirections(response);
            }
          });
          directionsDisplay.setMap(map);
        }

        }
    </script>

    <style>
      #mapkit-6386 {
        height: 400px;
        width: 900px;
        max-width: 100%;
      }
    </style>

    <div id="mapkit-6386"></div>

1 个答案:

答案 0 :(得分:0)

您的路线被“中断”了,因为这就是您的代码所做的。它调用makeRoutes(arrays[i]);,其中arrays是您的位置数组,分为两部分。

由于JavaScript控制台中的以下错误,标记无法点击:Uncaught ReferenceError: InfoBox is not defined,因为该文件(//cdn.mapkit.io/v1/infobox.js)语法错误:

Uncaught SyntaxError: Unexpected token export  infobox.js:88

并且填充信息窗口的代码不起作用。

proof of concept fiddle