平移到标记不起作用
pan to marker doesn't work
我在将地图中心设置在标记上时遇到问题。我基本上想找到一个位置并将我的地图居中。这是我的代码:
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat: 51.9189046, lng: 19.1343786},
zoom: 6
});
// Search for Onninen in Lublin.
var request = {
location: map.getCenter(),
radius: '1000',
query: 'onninen lublin'
};
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
place: {
placeId: results[0].place_id,
location: results[0].geometry.location
}
});
map.panTo(marker.getPosition());
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
我已经尝试了几种不同的方法。我尝试将 map.center 设置为 marker.position 我什至尝试了一个简单的事件来查看它是否有效,但一切都崩溃了。任何帮助都会很好:)
两件事,
1)(你可能有这个,但以防万一)你需要在 url 调用中包含 places 库以获取 google 地图 api
<script src="https://maps.googleapis.com/maps/api/js?libraries=places">
</script>
和 2) 当您创建标记时,您需要明确地给它一个位置。这是工作代码
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 51.9189046,
lng: 19.1343786
},
zoom: 6
});
// Search for Onninen in Lublin.
var request = {
location: map.getCenter(),
radius: '1000',
query: 'onninen lublin'
};
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
place: {
placeId: results[0].place_id,
location: results[0].geometry.location
},
position: results[0].geometry.location
});
map.panTo(marker.getPosition());
}
}
google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas {
height: 300px;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places">
</script>
<div id="map-canvas"></div>
我在将地图中心设置在标记上时遇到问题。我基本上想找到一个位置并将我的地图居中。这是我的代码:
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat: 51.9189046, lng: 19.1343786},
zoom: 6
});
// Search for Onninen in Lublin.
var request = {
location: map.getCenter(),
radius: '1000',
query: 'onninen lublin'
};
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
place: {
placeId: results[0].place_id,
location: results[0].geometry.location
}
});
map.panTo(marker.getPosition());
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
我已经尝试了几种不同的方法。我尝试将 map.center 设置为 marker.position 我什至尝试了一个简单的事件来查看它是否有效,但一切都崩溃了。任何帮助都会很好:)
两件事, 1)(你可能有这个,但以防万一)你需要在 url 调用中包含 places 库以获取 google 地图 api
<script src="https://maps.googleapis.com/maps/api/js?libraries=places">
</script>
和 2) 当您创建标记时,您需要明确地给它一个位置。这是工作代码
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 51.9189046,
lng: 19.1343786
},
zoom: 6
});
// Search for Onninen in Lublin.
var request = {
location: map.getCenter(),
radius: '1000',
query: 'onninen lublin'
};
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
place: {
placeId: results[0].place_id,
location: results[0].geometry.location
},
position: results[0].geometry.location
});
map.panTo(marker.getPosition());
}
}
google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas {
height: 300px;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places">
</script>
<div id="map-canvas"></div>