Question

您好我试图使用KML图标设置自定义标记，谷歌地图工作正常，但它不显示自定义标记。我目前正在使用从Google Map API文档中学到的知识，我在哪里出错？

这是我的代码。

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSTRDm6eRdkpoVOB2VJVJgTCNgmcuDcq0&callback=initMap">
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
        function initmap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 16,
                center: new google.maps.LatLng(14.529133, 121.021747),
                mapTypeId: 'roadmap'
            });

            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
            var testIcon = 'http://maps.google.com/mapfiles/kml/paddle/';

            var icons = {

                evac: {
                    icon: iconBase + 'ranger_station.png'
                },

                warehouse: {
                    icon: iconBase + 'truckpng'
                }
            };

            var features = [
                {
                    position: new google.maps.LatLng(14.529133, 121.021747),
                    type: 'evac'
                }
            ];

            features.forEach(function(feature) {
                var marker = new google.maps.Marker({
                    position: feature.position,
                    icon: icons[feature.type].icon,
                    map: map
                });
            });
        }
    </script>
    </head>

    <body onload="initmap()">
    <div id="map_canvas" style="width: 1100px; height: 1000px"></div>
    </body>

Answer 1

回调函数initMap与脚本<html> <head> <title>Google maps - KML Icons</title> <script> function initMap() { map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 16, center: new google.maps.LatLng(14.529133, 121.021747), mapTypeId: 'roadmap' }); var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; var testIcon = 'http://maps.google.com/mapfiles/kml/paddle/'; var icons = { evac: { icon: iconBase + 'ranger_station.png' }, warehouse: { icon: iconBase + 'truckpng' } }; var features = [ { position: new google.maps.LatLng(14.529133, 121.021747), type: 'evac' } ]; features.forEach(function(feature) { var marker = new google.maps.Marker({ position: feature.position, icon: icons[feature.type].icon, map: map }); }); } </script> <script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyBSTRDm6eRdkpoVOB2VJVJgTCNgmcuDcq0&callback=initMap'></script> </head> <body> <div id='map_canvas' style='width: 1100px; height: 1000px'></div> </body> </html>调用的函数不同，并且地图ID的引用错误。

{{1}}

自定义标记未出现 - Google Maps JavaScript

1 个答案: