javascript - 将 Jquery 谷歌地图更改为 angularJS

Question

我有一个带有查找地址和路由系统的 Jquery 谷歌地图，所以我想将其更改为具有更多选项的 Angular 谷歌地图， 这是我的 Jquery 谷歌地图:

var directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true });
var directionsService = new google.maps.DirectionsService();
var map;

$(window).load(function() {
    var myOptions = {
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(35.270, -80.837)
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directions"));
    
    $("#routeMode").on("change", function() { calcRoute(); });
    $("#routeGo").on("click", function() { calcRoute(); });
    $("#routeClear").on("click", function() { directionsDisplay.setDirections({ routes: [] }); });
    
});


function calcRoute() {
    var request = {
        origin: $("#routeTo").val(),
        destination: $("#routeFrom").val(),
        travelMode: google.maps.TravelMode[$("#routeMode").val()]
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

#map_canvas{
    width: 60%;
    height: 400px;
    border: 1px solid black;
    float: left;
}
#directions {
    width: 38%;
    float: right; 
}
body {
    font-size: 12px;
}

<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="routeFrom" name="routeFrom" value="700 n tryon st, charlotte nc" />
<label for="routeFrom">From</label><br />
<input type="text" id="routeTo" name="routeTo" value="Huntersville, NC" />
<label for="routeTo">To</label><br />
<select id="routeMode" name="routeMode">
    <option value="DRIVING">Driving</option>
    <option value="WALKING">Walking</option>
    <option value="BICYCLING">Bicycling</option>
    <option value="TRANSIT">Transit</option>
</select>
<label for="routeMode">Mode</label><br />
<div class="textcenter">
    <button id="routeGo">Route</button>
    <button id="routeClear">Clear Route</button>
</div>
<div id="map_canvas"></div>
<div id="directions"></div>

最后我想改变 jquery google map html 来吹代码，它将与 angularJs 一起工作:

<label for="routeFrom">From</label>

<input type="text" id="routeFrom" name="routeFrom" placeholder="city" />
<input type="text" id="routeFrom" name="routeFrom" placeholder="street" />
<input type="text" id="routeFrom" name="routeFrom" placeholder="allay" />
<input type="text" id="routeFrom" name="routeFrom" placeholder="no" />
<input type="text" id="routeFrom" name="routeFrom" placeholder="unit" />

<br /><br /><br />
<label for="latFrom">From lat and lang (automatic fill)</label>
<input type="text" id="latFrom" name="latFrom" placeholder="lat" />
<input type="text" id="langFrom" name="langFrom" placeholder="lang" />
<hr>
    
<br /><br /><br />
<label for="routeTo">To</label>
<input type="text" id="routeTo" name="routeTo" placeholder="city" />
<input type="text" id="routeTo" name="routeTo" placeholder="street" />
<input type="text" id="routeTo" name="routeTo" placeholder="allay" />
<input type="text" id="routeTo" name="routeTo" placeholder="no" />
<input type="text" id="routeTo" name="routeTo" placeholder="unit" />

<br /><br /><br />
<label for="latTo">to lat and lang (automatic fill)</label>
<input type="text" id="latTo" name="latTo" placeholder="lat" />
<input type="text" id="langTo" name="langTo" placeholder="lang" />
    
    
<hr>    
    
<br /><br /><br />
<label for="routeMode">Mode</label>
<select id="routeMode" name="routeMode">
    <option value="DRIVING">Driving</option>
    <option value="WALKING">Walking</option>
    <option value="BICYCLING">Bicycling</option>
    <option value="TRANSIT">Transit</option>
</select>

<br /><br /><br />
<div class="textcenter">
    <button id="routeGo">Route</button>
    <button id="routeClear">Clear Route</button>
</div>
<div id="map_canvas"></div>
<div id="directions"></div>

我的更多选项:更改地址格式 - 从 map 中自动获取坐标

Answer 1

我以前也做过类似的事情。 因此，我将分享我转换后的代码的样子，而不是将您的代码转换为 AngularJs。

我创建了一个提供程序 ngGPlacesAPI 并公开了我需要从 Google map 获取的所有功能。

'use strict';

angular.module('quikr.common.googlePlaces', []);

angular.module('quikr.common.googlePlaces').
    provider('ngGPlacesAPI', function () {

    var defaults = {
        city:"Bangalore",
        locality:"",
        geocoder  : new google.maps.Geocoder(),
        map: null,
        marker: null,
        infowindow : new google.maps.InfoWindow({size: new google.maps.Size(150,50)})
    };

    this.$get = function ($q, $window) {
        function onStreetSelection (address) {
            defaults.geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var lat = results[0].geometry.location.lat();
                    var long = results[0].geometry.location.lng();
                    document.getElementById("map-container").style.display = '';
                    // create the map
                    var myOptions = {
                        zoom: 15,
                        scrollwheel: false,
                        draggable: false,
                        center: new google.maps.LatLng(lat,long),
                        mapTypeControl: true,
                        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                        navigationControl: true,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    defaults.map = new google.maps.Map(document.getElementById("map-container"),myOptions);

                    google.maps.event.addListener(defaults.map, 'click', function() {
                        defaults.infowindow.close();
                    });
                    google.maps.event.addListener(defaults.map, 'click', function(event) {
                        var myLatLng = event.latLng;
                        var lat = myLatLng.lat();
                        var long = myLatLng.lng();
                        setMarker(lat,long,defaults.map)
                        //call function to create marker
                    });
                    setMarker(lat,long,defaults.map)
                }
            });
        }
        function getStreetAdresses(keyword) {
            var deferred = $q.defer();
            var searchword ='';
            searchword += defaults.city + ", "+keyword;
            function callback (predictions, status) {
                if (status != google.maps.places.PlacesServiceStatus.OK) {
                    deferred.reject(status);
                }
                else {
                    return deferred.resolve(predictions);
                }
            }
            var service = new google.maps.places.AutocompleteService();
            service.getPlacePredictions( {input: searchword, componentRestrictions: {country: 'in'}},callback);
            return deferred.promise;
        }

        function setMarker(lat, long, map) {

            if (defaults.marker) {
                defaults.marker.setMap(null);
                defaults.marker = null;
            }


            if (lat == '' || long == '') {
                //console.log('lat or lng not defined');
                return;
            }
            var position = new google.maps.LatLng(parseFloat(lat),
                parseFloat(long));
            defaults.marker = new google.maps.Marker({
                position: position,
                map:      map
            });
            map.setCenter(position);
        }

        return {
            getDefaults: function () {
                return defaults;
            },
            init_map : function(city) {
                defaults.city = typeof city !== 'undefined' ? city : defaults.city;
                var geocoder =  defaults.geocoder;
                geocoder.geocode( { 'address': defaults.city}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var var_location = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                        var var_mapoptions = {
                            center: var_location,
                            zoom: 12,
                            scrollwheel: false,
                            draggable: false
                        };
                        var var_marker = new google.maps.Marker({
                            position: var_location,
                            map: var_map,
                            title:"Bangalore"
                        });
                        var var_map = new google.maps.Map(
                            document.getElementById("map-container"),
                            var_mapoptions
                        );
                        var_marker.setMap(var_map);
                    } else {
                        //console.log("Something got wrong " + status);
                    }
                });
            },
            getStreetAddressPredictions : function(keyword,city)
            {
                defaults.city =city;
                return getStreetAdresses(keyword,city);
            },
            setAddressOnMap : function(add)
            {
                onStreetSelection(add);
            },
            setMarker : function(lat,long)
            {
                var myOptions = {
                    zoom: 15,
                    scrollwheel: false,
                    draggable: false,
                    center: new google.maps.LatLng(lat,long)
                }
                defaults.map = new google.maps.Map(document.getElementById("map-container"),myOptions);
                setMarker(lat,long, defaults.map)

            }

        };
    };

    this.$get.$inject = ['$q', '$window'];

    this.setDefaults = function (args) {
        angular.extend(defaults, args);
    };

});