我有一些JavaScript代码可以从Google地图获取地图，但在访问时无法显示客户端的当前位置。
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
};
请帮我设置地理位置;当用户访问我的网站时，地图应该显示他们的位置。
谢谢！
答案 0 :(得分：0)
在网址中： https://developers.google.com/maps/documentation/javascript/examples/map-geolocation 您可以从 map.setCenter（options.position）;
行 handleNoGeolocation 查看这是我设置中心地图的功能，具有lat，lng和zoom级别，默认缩放级别= 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);
}
试试这个我希望它能帮到你:)
答案 1 :(得分：0)
它不起作用，地图不显示在客户的当前位置！
这是我的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);
}
},