Google Maps JavaScript API位置库:仅标记一些位置,而不是全部标记

时间:2018-07-26 17:00:53

标签: javascript cordova google-maps-api-3

首先,请理解它可能不是语法的,因为通过翻译器编写。 此代码可获取我的位置,并在地图上标记我周围的位置。 有一个问题,代码没有错误,但是只显示了一些地方,而不是所有地方。 实际上,我的位置附近有四家牙科诊所,但是在地图上只有一家。 你能帮忙吗?

  1. cordova版本:8.0.0

  2. cordova插件列表

    cordova-plugin-geolocation 4.0.1 "Geolocation"
    cordova-plugin-googlemaps 2.3.8 "cordova-plugin-googlemaps"
    cordova-plugin-whitelist 1.3.3 "Whitelist" 
    
  3. 所有地图API均已启用。

  4. 编写代码时引用的站点

    https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html#get-the-weather-forecast
    https://developers.google.com/maps/documentation/javascript/places#place_search_requests
    

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>MAP</title>

    <script type="text/javascript" src="cordova.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAxqeI0JlgcG_U2Tbny_ODCOaf1dA7HUM4&libraries=places"></script>
    <script>    
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            console.log("navigator.geolocation works well");
        }

        //documentReady
        $(document).ready(function(){
            getPlacesLocation();
        });
     </script> 
  </head>

  <body>
    <script>
        var map;
        var service;
        var infowindow;
        var Latitude = undefined;
        var Longitude = undefined;

        // Get geo coordinates
        function getPlacesLocation() {
            navigator.geolocation.getCurrentPosition
            (onPlacesSuccess, onPlacesError, {enableHighAccuracy:true});
        }
        
        // Success callback for get geo coordinates
        var onPlacesSuccess = function (position) {
            Latitude = position.coords.latitude;
            Longitude = position.coords.longitude;
            getPlaces(Latitude, Longitude);
            console.log(Latitude + " " + Longitude);


            // Get places by using coordinates
            function getPlaces(latitude, longitude) {
                var latLong = new google.maps.LatLng(latitude, longitude);
                var mapOptions = {
                    center: new google.maps.LatLng(latitude, longitude),
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                Map = new google.maps.Map(document.getElementById('map'), mapOptions);
                Infowindow = new google.maps.InfoWindow();
                var request = {       
                location:latLong,
                radius : 10000,
                name : 'dentist'
                  }; //Map
                
                var service = new google.maps.places.PlacesService(Map);
                service.nearbySearch(request, callback);
                
                // Success callback for locating stores in the area 
                function callback(results, status) {    
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                    var place = results[i];
                    createMarker(results[i]);
                        }
                    }
                }//callback

                // Success callback for watching your changing position
                var onPlacesWatchSuccess = function (position) {
                var updatedLatitude = position.coords.latitude;
                var updatedLongitude = position.coords.longitude;
                if (updatedLatitude != Latitude && updatedLongitude != Longitude) {
                    Latitude = updatedLatitude;
                    Longitude = updatedLongitude;
                    getPlaces(updatedLatitude, updatedLongitude);
                }
                }

                // Place a pin for each store on the map
                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 () {
                var infowindow = new google.maps.InfoWindow();
                infowindow.open(map, this);

                service.getDetails(place, function(details, status) {
                    if (status === google.maps.places.PlacesServiceStatus.OK) {
                        infowindow.setContent(details.types + "<br />" + details.name + "<br />" + details.formatted_phone_number +"<br />" +details.formatted_address + "<br />"+details.website);
                            }
                        });//getDetails
                    });//addListener
                }//createMarker
            }//getPlaces
        }//onPlacesSuccess

        // Error callback
        function onPlacesError(error) {
        console.log('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
        }

        // Watch your changing position
        function watchPlacesPosition() {
        return navigator.geolocation.watchPosition
        (onPlacesWatchSuccess, onPlacesError, {enableHighAccuracy:true});
        }
    </script>
    <div id="map" style="width:500px;height:500px;">
    </div>
  </body>
</html>

0 个答案:

没有答案