地图搜索栏没有加载位置，有什么想法吗？

Question

我的代码打开了一个中等屏幕大小的谷歌地图，并具有设置标记的功能。我一直在尝试添加的是搜索栏，以便在找到位置时定位位置或放置标记，同时在屏幕上单击时仍保留放置多个标记但搜索栏不起作用的功能。

<?php

class MapNewMultipleClaims extends Render{

    public function render($lat, $lon, $markers){

        ob_start();
        // // Load map
        // draw = true;
        // loadGoogleMaps();
        ?>

        <input type="text" id='mapsearch' size='50'>
        <div id="map_canvas"></div>
        <div id="map-debug" style="height: 20px; display: none;"></div>


        <br />

        <script>

            window.gMapsCallback = function(){
                $(window).trigger('gMapsLoaded');
            };
                     function initialize(){


                var marker = null;
                var index = 0;


                //Map options
                var mapOptions = {
                    zoom: 13,
                    center : new google.maps.LatLng(<?=$lat?>, <?=$lon?>),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };


                //Map instance
                map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
                //var input = document.getElementById('pac-input');
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);


                var datos = [];     
                newLatitude = <?=$lat?>;
                newLongitude = <?=$lon?>;
                markers = <?=$markers?>
                    <?php
                    //Create marker
                    $markerIcon = '/modules/claims/css/icon/mm_20_verde.png';
                    $markerTitle = $title;

                    ?>

                    google.maps.event.addListener(map, 'click', function(event) {
                    addMarker(event.latLng, map);
                    index++;
                    });
                    // google.maps.event.addListener(map, 'bounds_changed', function() {
                    //  searchBox.setBounds(map.getBounds());
                    // });

                    var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));

                    google.maps.event.addListener(searchBox, 'places_changed', function() {

                        var places = searchBox.getPlaces();
                        var bounds = new google.maps.LasLngBounds();
                        var i, place;

                        for(i=0; place&places[i]; i++){
                            bounds.extend(place.geometry.location);
                            marker.setPosition(place[0].geometry.location,map)
                        }

                        map.fitBounds(bounds);

                        //if (places.length == 0) {
                        //return;
                        //}
                        //addMarker(place[0].geometry.location,map);

                    });

                    function addMarker(location, map) {

                            var marker = new google.maps.Marker({
                            position: location,
                            draggable: true,
                            animation: google.maps.Animation.DROP,
                            icon: '<?=$markerIcon?>',
                            map: map,
                            index: index
                            });
                            datos.push(marker.getPosition().lat() + "|" + marker.getPosition().lng());

                            markers == datos;
                            //markers[index] = marker;
                    }

                    google.maps.event.addListener(marker, 'dragend', function(){
                    newLatitude = marker.getPosition().lat();
                    newLongitude = marker.getPosition().lng();
                    location = marker.getPosition();
                });
                google.maps.event.addDomListener(window, 'load', initialize);


                return markers;
            }


            //Load Google Maps scripts
            function loadGoogleMaps(){

                //Check if google maps were previously loaded
                if($('#googleMapsScript').length <= 0){
                    var script_tag = document.createElement('script');
                    script_tag.setAttribute("type","text/javascript");
                    script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback&libraries=geometry&libreries=places");
                    script_tag.setAttribute("id","googleMapsScript");
                    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
                }
                else{
                    $(window).trigger('gMapsLoaded');
                }

            }

            $(window).bind('gMapsLoaded', initialize);

            loadGoogleMaps();

        </script>
        <script type="text/javascript" src="/modules/settings/js/layers.js"></script>
        <?php



        return ob_get_clean();

    }

}

Answer 1

您错误地包含了地点库。要包含多个库，请使用the documentation 中指定的逗号分隔列表：

要请求多个库，请用逗号分隔它们：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,places"> </script>

&libraries=geometry&libreries=places

应该是：

&libraries=geometry,places