Question

我在使用Google Maps时遇到问题。如果我第一次是在google地图上选择一个位置，那之后我在搜索框中输入了另一个位置就没有问题了。但是当我先在搜索框中输入位置信息而未在开头选择位置时，就会出现错误。

TypeError：marker.setPosition不是函数

<script type="text/javascript">
    var map;
    var marker = false;
    function initMap() {
        <?php if ($customer['lat'] != '0.00000000' && $customer['lng'] != '0.00000000'): ?>
            var myLatLng = {lat: <?php echo $customer['lat']; ?>, lng: <?php echo $customer['lng']; ?>};
            var centerOfMap = new google.maps.LatLng(<?php echo $customer['lat']; ?>, <?php echo $customer['lng']; ?>);
        <?php else: ?>
            var centerOfMap = new google.maps.LatLng(-6.2115, 106.8452);
        <?php endif; ?>

        var options = {
            center: centerOfMap, 
            zoom: 15
        };

        map = new google.maps.Map(document.getElementById('map'), options);

        <?php if ($customer['lat'] != '0.00000000' && $customer['lng'] != '0.00000000'): ?>
            marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                draggable: true
            });
        <?php endif; ?>

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
            searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        searchBox.addListener('places_changed', function() {
            var places = searchBox.getPlaces();
            if (places.length == 0) {
                return;
            }

            // For each place, get the icon, name and location.
            var bounds = new google.maps.LatLngBounds();
            places.forEach(function(place) {
                if (!place.geometry) {
                    console.log("Returned place contains no geometry");
                    return;
                }
                marker.setPosition(place.geometry.location);
                map.setCenter(place.geometry.location);
            });
        });

        google.maps.event.addListener(map, 'click', function(event) {                
            var clickedLocation = event.latLng;
            if (marker === false){
                marker = new google.maps.Marker({
                    position: clickedLocation,
                    map: map,
                    draggable: true 
                });
                google.maps.event.addListener(marker, 'dragend', function(event){
                    markerLocation();
                });
            } else{
                marker.setPosition(clickedLocation);
            }
        });
    }
    $(function(){
        $('#save-map').on('click touchstart', function(){
            var currentLocation = marker.getPosition();
            $('input[name="lat"]').val(currentLocation.lat());
            $('input[name="lng"]').val(currentLocation.lng());
            $('#mapModal').modal('hide');
            $('#img-map').html('<img src="https://maps.googleapis.com/maps/api/staticmap?center='+currentLocation.lat()+','+currentLocation.lng()+'&markers='+currentLocation.lat()+','+currentLocation.lng()+'&scale=2&size=640x100&zoom=15&key=<?php echo getenv('GOOGLE_MAP_API_KEY'); ?>" class="img-fluid" style="width: 100%;">');
        });
    });
</script>

我如何修改此javascript脚本，所以没有问题。如果用户首次在搜索框中直接输入地址，则标记会根据需要运行

Answer 1

当用户直接在搜索框列中输入内容时，我替换了var标记并定义了位置图。

var map;
var marker = [];
function initMap() {
    <?php if ($customer['lat'] != '0.00000000' && $customer['lng'] != '0.00000000'): ?>
        var myLatLng = {lat: <?php echo $customer['lat']; ?>, lng: <?php echo $customer['lng']; ?>};
        var centerOfMap = new google.maps.LatLng(<?php echo $customer['lat']; ?>, <?php echo $customer['lng']; ?>);
    <?php else: ?>
        var centerOfMap = new google.maps.LatLng(-6.2115, 106.8452);
    <?php endif; ?>

    var options = {
        center: centerOfMap, 
        zoom: 15
    };

    map = new google.maps.Map(document.getElementById('map'), options);

    <?php if ($customer['lat'] != '0.00000000' && $customer['lng'] != '0.00000000'): ?>
        marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            draggable: true
        });
    <?php else: ?>
        marker = new google.maps.Marker({
            position: centerOfMap,
            map: map,
            draggable: true
        });
    <?php endif; ?>

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
        searchBox.setBounds(map.getBounds());
    });

    var markers = [];
    searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function(place) {
            if (!place.geometry) {
                console.log("Returned place contains no geometry");
                return;
            }
            marker.setPosition(place.geometry.location);
            map.setCenter(place.geometry.location);
        });
    });

    google.maps.event.addListener(map, 'click', function(event) {                
        var clickedLocation = event.latLng;
        if (marker === false){
            marker = new google.maps.Marker({
                position: clickedLocation,
                map: map,
                draggable: true 
            });
            google.maps.event.addListener(marker, 'dragend', function(event){
                markerLocation();
            });
        } else{
            marker.setPosition(clickedLocation);
        }
    });
}
$(function(){
    $('#save-map').on('click touchstart', function(){
        var currentLocation = marker.getPosition();
        $('input[name="lat"]').val(currentLocation.lat());
        $('input[name="lng"]').val(currentLocation.lng());
        $('#mapModal').modal('hide');
        $('#img-map').html('<img src="https://maps.googleapis.com/maps/api/staticmap?center='+currentLocation.lat()+','+currentLocation.lng()+'&markers='+currentLocation.lat()+','+currentLocation.lng()+'&scale=2&size=640x100&zoom=15&key=<?php echo getenv('GOOGLE_MAP_API_KEY'); ?>" class="img-fluid" style="width: 100%;">');
    });
});

如何修复谷歌地图中的搜索框错误

1 个答案: