地理位置地图 JS.

Geolocation Map JS

本文关键字:JS 地图 地理位置      更新时间:2023-09-26

我有一些JavaScript代码可以从谷歌地图获取地图,但是当他们访问它时,它不会显示客户端的当前位置。

    initialize: function(options) {
        _.bindAll(this, 'setCenter');
        var view = this;
        if ($('#map-top-wrapper').length == 0) return;
        view.options = _.extend(this, options);
        view.center = new google.maps.LatLng(this.options.latitude, this.options.longitude);
        view.map_options = {
            'zoom': parseInt(ae_globals.map_zoom),
            'center': view.center,
            'mapTypeId': google.maps.MapTypeId.ROADMAP,
            // 'scrollwheel': false 
            'scrollwheel': true,
            'zoomControl': true
        };

请帮我设置地理位置;当用户访问我的网站时,地图应该显示他们的当前位置。

谢谢!

在网址中:https://developers.google.com/maps/documentation/javascript/examples/map-geolocation您可以从函数句柄看到行图.setCenter(options.position)的NoGeolocation;

这是我设置中心地图的功能,纬度,lng和缩放级别,默认缩放级别= 7。

function SetCenterMap(lat, lng, zoom) {
    if (typeof (zoom) === 'undefined')
        zoom = 7;
    var center = new google.maps.LatLng(lat, lng);
    map.setZoom(zoom);
    map.setCenter(center);
}

试试这个,希望能帮到你:)

不起作用,地图不显示在客户端的当前位置!

这是我的js文件:

(function(Views, Models, $, Backbone) {
Views.Map = Backbone.View.extend({
    // load info window content template
    events: {},
    // initilize view
    initialize: function(options) {
        _.bindAll(this, 'setCenter');
        var view = this;
        if ($('#map-top-wrapper').length == 0) return;
        view.options = _.extend(this, options);
        view.center = new google.maps.LatLng(this.options.latitude, this.options.longitude);
        view.map_options = {
            'zoom': parseInt(ae_globals.map_zoom),
            'center': view.center,
            'mapTypeId': google.maps.MapTypeId.ROADMAP,
            // 'scrollwheel': false 
            'scrollwheel': false,
            'zoomControl': true
        };
        this.template = _.template($('#ae_info_content_template').html());
        // map marker colections
        view.markers = [];
        // map marker cluster
        view.markerCluster = [];
        // init map info window
        var iw1 = new InfoBubble({
            content: '',
            position: new google.maps.LatLng(-35, 151),
            shadowStyle: 1,
            padding: 0,
            borderRadius: 5,
            arrowSize: 0,
            borderWidth: 0,
            borderColor: '#ccc',
            disableAutoPan: false,
            backgroundColor: '#fff',
            arrowStyle: 0,
            maxWidth: 600,
            minWidth: 400,
            minHeight: 90,
            maxHeight: 400,
            padding: 0,
            autoPan: true
        });
        view.infoWindow = iw1;
        // Map for default save-widget
        this.map = new google.maps.Map(document.getElementById("map-top-wrapper"), view.map_options);
        this.categories = [];
        if ($('#de-categories-data').length > 0) {
            this.categories = JSON.parse($('#de-categories-data').html());
        }
        this.initMapIcon();
        // render map
        this.renderMap();
        this.nearby = false;
        if ($('#nearby_location').length > 0) {
            this.nearby = true;
        }
        //bind event when user give location
        // AE.pubsub.on('de:getCurrentPosition', this.setCenter, this);
    },
    initMapIcon: function() {
        var view = this;
        this.icons = {};
        this.colors = {};
        this.fontClass = {};
        _.each(this.categories, function(element, index) {
            var icon = {
                path: 'M 50 -119.876 -50 -119.876 -50 -19.876 -13.232 -19.876 0.199 0 13.63 -19.876 50 -19.876 Z',
                fillColor: element.color,
                fillOpacity: 1,
                scale: 0.3,
                strokeColor: element.color,
                strokeWeight: 0
            };
            view.icons[element.term_id] = icon;
            view.colors[element.term_id] = element.color;
            view.fontClass[element.term_id] = element.icon;
        });
    },
    /**
     * render map call ajax to get marker data
     * @author Dakachi
     */
    renderMap: function(data) {
        var view = this,
            data = {
                action: 'de_get_map_data'
            };
        view.markers = [];
        /**
         * ajax request get all place on map
         */
        if ($('.main-pagination').length > 0) {
            var query = JSON.parse($('.main-pagination .ae_query').html());
            data.query = query;
        }
        var i = 100,
            k = 1;
        if($('#total_place').length > 0 ) {
            i = JSON.parse( $('#total_place').html() );
            i = i.number;
        }
        var cat = '';
        if($('#place_cat_slug').length > 0){
            cat = JSON.parse( $('#place_cat_slug').html() );
            cat = cat.slug;
        }
        for (var j = i; j >= 0; j = (j-50) ) {
            data.paged = k;
            data.showposts = 50;
            data.place_category = cat;
            $.ajax({
                type: 'get',
                url: ae_globals.ajaxURL,
                data: data,
                beforeSend: function() {},
                success: function(resp) {
                    if (typeof resp.data !== 'undefined' && resp.data.length > 0 ) {
                        var data = resp.data;
                        // bind data markers to map
                        view.ajaxSuccess(data);
                    }
                }
            });
            k++;
        }
    },
    /**
     * after successful request map data
     */
    ajaxSuccess: function(data) {
        var view = this;
        var bounds = new google.maps.LatLngBounds();
        for (var i = 0; i < data.length; i++) {
            var content = view.template(data[i]),
                // place latitude and longitude
                latLng = new google.maps.LatLng(data[i].et_location_lat, data[i].et_location_lng),
                // get place category
                term = data[i]['place_category'][0],
                color = view.colors[term],
                fontClass = view.fontClass[term],
                icon = view.icons[term];
            bounds.extend(latLng);
            if (typeof color === 'undefined') {
                color = '#F59236';
            }
            if (typeof fontClass === 'undefined') {
                fontClass = 'fa-map-marker';
            }
            if (typeof icon === 'undefined') {
                var icon = {
                    path: 'M 50 -119.876 -50 -119.876 -50 -19.876 -13.232 -19.876 0.199 0 13.63 -19.876 50 -19.876 Z',
                    fillColor: '#F59236',
                    fillOpacity: 1,
                    scale: 0.3,
                    strokeColor: '#F59236',
                    strokeWeight: 0
                };
            }
            var marker = new MarkerWithLabel({
                position: latLng,
                // label by place category color and icon class
                labelContent: "<span><i style='color:" + color + ";' class='fa " + fontClass + "'></i><span>",
                labelAnchor: new google.maps.Point(10, 31),
                labelClass: "map-labels", // the CSS class for the label
                labelStyle: {
                    opacity: 1.0
                },
                icon: icon
            });
            // // set marker content using in multichoice
            marker.content = content;
            view.markers.push(marker);
            // attach info window
            view.attachMarkerInfowindow(marker, content, data[i]);
            if (typeof view.model !== 'undefined' && view.model.get('ID') == data[i]['ID']) {
                view.map.setCenter(latLng);
                /**
                 * set conten for info window
                 */
                view.infoWindow.setContent(content);
                // set border color for info window
                view.infoWindow.setBorderColor(color);
                // open info window 
                view.infoWindow.open(this.map, marker);
                view.map.setZoom(15);
            }
        }
        // init map cluster
        view.markerCluster = new MarkerClusterer(view.map, view.markers, {
            zoomOnClick: true,
            gridSize: 20
        });
        // bind event click on cluster for multi marker in a position
        view.markerCluster.onClick = function(icon) {
            return view.multiChoice(icon.cluster_);
        }
        if (typeof view.model === 'undefined' && parseInt(ae_globals.fitbounds)) {
            //  Fit these bounds to the map
            view.map.fitBounds(bounds);
        }
    },