网络 - 单击搜索附近地点时,当前位置消失

Posted

技术标签:

【中文标题】网络 - 单击搜索附近地点时,当前位置消失【英文标题】:Web - Current location disappers when click on search nearby place 【发布时间】:2018-01-18 06:59:52 【问题描述】:

1 - 显示当前位置 - 完成

2 - 显示附近的学校/银行 - 完成

以上两个是我处理得很好的任务。但问题是当我搜索附近的学校或银行时,当前位置地图标记消失了。为什么会这样?


    app.controller('main', function ($scope) 
    var map, infoWindow;

    $scope.initLocation = function () 
        // map = new google.maps.Map(document.getElementById('map'), 
        //     center: 
        //         lat: -34.397,
        //         lng: 150.644
        //     ,
        //     zoom: 15
        // );

        //infoWindow = new google.maps.InfoWindow;
        debugger;
        if (navigator.geolocation) 

            navigator.geolocation.getCurrentPosition(function (position) 
                var pos = 
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                ;

                $scope.position_lat = position.coords.latitude;
                $scope.position_long = position.coords.longitude;

                var uluru =  lat: $scope.position_lat, lng: $scope.position_long ;
                var map = new google.maps.Map(document.getElementById('map'), 
                    zoom: 12,
                    center: uluru
                );
                var marker = new google.maps.Marker(
                    position: uluru,
                    map: map
                );


            , function () 
                handleLocationError(true, infoWindow, map.getCenter());
            );
         else 
            // Browser doesn 't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        
    

    function handleLocationError(browserHasGeolocation, infoWindow, pos) 
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
            'Error: The Geolocation service failed.' :
            'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
    

    //  var map;
    // var infowindow;

    function initMap(place_name) 
        var pyrmont =  lat: $scope.position_lat, lng: $scope.position_long ;

        map = new google.maps.Map(document.getElementById('map'), 
            center: pyrmont,
            zoom: 15
        );

        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(
            location: pyrmont,
            radius: 25000,
            type: [place_name]
        , callback);
    

    function callback(results, status) 
        console.log(results);
        if (status === google.maps.places.PlacesServiceStatus.OK) 
            for (var i = 0; i < results.length; i++) 
                createMarker(results[i]);
            
        
    

    function createMarker(place) 
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker(
            map: map,
            position: place.geometry.location
        );

        google.maps.event.addListener(marker, 'click', function () 
            infowindow.setContent(place.name);
            infowindow.open(map, this);
        );
    

    $scope.show_places = function (place_name) 
        initMap(place_name);
       
);

<body ng-app="starter">

    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Location Finder</h1>
        </ion-header-bar>
        <ion-nav-view></ion-nav-view>

        <div class="bar bar-footer bar-assertive" ng-controller="main">
            <div class="button-bar">
                <button class="button button-positive" ng-click="show_places('bank')">Banks</button>
                <button class="button button-energized " ng-click="show_places('school')">Schools</button>
                <button class="button button-positive " ng-click="initLocation() ">Find me</button>
            </div>
        </div>
    </ion-pane>
</body>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=mykey&libraries=places "></script>

我做错了什么,最后我想计算当前位置之间的距离并在点击时按结果搜索。

【问题讨论】:

能否添加函数show_places的代码? 它已经在 controller.js 的底部了 【参考方案1】:

标记消失是因为当您的 show_places 函数每次创建新地图时都会导致所有内容重新初始化。相反,地图应该只初始化一次,并且您应该使用该地图实例根据需要添加和删除标记。

【讨论】:

以上是关于网络 - 单击搜索附近地点时,当前位置消失的主要内容,如果未能解决你的问题,请参考以下文章

我想在附近的地方搜索之前首先获得它的当前位置,并且可以选择在任何搜索之后或任何搜索之前

小程序获取当前位置加搜索附近热门小区及商区

MySQL:多个纬度和经度的附近位置

Here API - 实现附近地点功能

发布带有位置的状态更新

如何实现地图App中附近地点搜索及聚合标记功能