Question

我正在尝试通过db传递的值显示带有复杂折线和标记的Google地图。一切都很好，但地图是灰色的，不是居中的我试过不同的解决方案，但都给了我同样的问题。在我的Js代码和html调用之下。知道我为什么这么做吗？

<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(-26.2041028, 28.047305100000017);
        var mapOpt = {
            navigationControl: true,
            mapTypeControl: false,
            scaleControl: false,
            scrollwheel: false,
            zoom: 3,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var map = new google.maps.Map(document.getElementById('map-210'), mapOpt);
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        var tripPlanCoordinates = [];
        var locations = [
            ["Johannesburg", -26.2041028, 28.047305100000017, 1],
            ["Mpumalanga", -25.565336, 30.52790959999993, 2],
            ["Kruger Park", -24.7562879, 31.81070790000001, 3],
            ["Città del Capo", -33.9248685, 18.424055299999964, 4],
            ["Mahé", -4.6826693, 55.48039599999993, 5],
        ];
        for (i = 0; i < locations.length; i++) {
            tripPlanCoordinates[i] = new google.maps.LatLng(locations[i][1], locations[i][2]);
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: 'http://localhost/images/markers/1-default.png',
                title: "'" + locations[i][0] + "'"
            });
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                    console.log("#stage_" + i);
                    window.location.href = "#stage_" + i;
                }
            })(marker, i));
        }
        var tripPlan = new google.maps.Polyline({
            path: tripPlanCoordinates,
            geodesic: true,
            strokeColor: '#B12138',
            strokeOpacity: 0.5,
            strokeWeight: 2
        });
        tripPlan.setMap(map);
    }

    function loadMapScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initialize';
        document.body.appendChild(script);
    }

    $(document).ready(function() {
        loadMapScript();
    }); 
    </script>
    <div id="map-210" style="width:100%; height:380px;"></div>

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(-26.2041028, 28.047305100000017);
        var mapOpt = {
            navigationControl: true,
            mapTypeControl: false,
            scaleControl: false,
            scrollwheel: false,
            zoom: 3,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var map = new google.maps.Map(document.getElementById('map-210'), mapOpt);

        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        var tripPlanCoordinates = [];
        var locations = [
            ["Johannesburg", -26.2041028, 28.047305100000017, 1],
            ["Mpumalanga", -25.565336, 30.52790959999993, 2],
            ["Kruger Park", -24.7562879, 31.81070790000001, 3],
            ["Città del Capo", -33.9248685, 18.424055299999964, 4],
            ["Mahé", -4.6826693, 55.48039599999993, 5],
        ];
        for (i = 0; i < locations.length; i++) {
            tripPlanCoordinates[i] = new google.maps.LatLng(locations[i][1], locations[i][2]);
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: 'http://localhost/images/markers/1-default.png',
                title: "'" + locations[i][0] + "'"
            });
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                    console.log("#stage_" + i);
                    window.location.href = "#stage_" + i;
                }
            })(marker, i));
        }
        var tripPlan = new google.maps.Polyline({
            path: tripPlanCoordinates,
            geodesic: true,
            strokeColor: '#B12138',
            strokeOpacity: 0.5,
            strokeWeight: 2
        });
        tripPlan.setMap(map);
    }

    function loadMapScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?callback=initialize';
        document.body.appendChild(script);
    }

    $(document).ready(function() {
        loadMapScript();
    }); 
    </script>
    <div id="map-210" style="width:100%; height:380px;"></div>

＆＃13;

这是你想要的吗？

使用多个折线和标记显示地图不清晰和居中

1 个答案: