自动调整谷歌使用位置id映射多个标记
Autofit google maps multiple markers using place id
我正在使用谷歌位置自动完成。我有placeId,并成功显示它使用谷歌地图API。但并不是所有的标记都可见。我必须放大它才能看到所有的标记。用缩放调整地图后,我可以看到所有的标记。如何自动调整屏幕上的所有标记?
我的代码:
var placeid_json = <?php echo $placeids; ?>;
var openedInfoWindow = null;
var bounds = new google.maps.LatLngBounds();
function initialize() {
var latitude = 21.1202644,
longitude = 79.0418986,
radius = 8000,
center = new google.maps.LatLng(latitude, longitude),
mapOptions = {
center: center,
zoom: 10,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
setMarkers(center, radius, map);
}
function setMarkers(center, radius, map) {
var json = placeid_json;
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i];
createMarker(data, map);
}
}
function createMarker(data, map) {
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: data.placeid
}, function (result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
var marker = new google.maps.Marker({
map: map,
place: {
placeId: data.placeid,
location: result.geometry.location
}
//position: result.geometry.location
});
infoBox(map, marker, data, result);
});
}
function infoBox(map, marker, data, result) {
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.content);
infoWindow.open(map, marker);
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.content+"<br>"+result.name);
infoWindow.open(map, marker);
});
})(marker, data);
}
google.maps.event.addDomListener(window, 'load', initialize);
- 将
map
变量设置为全局变量(就像现有的bound对象一样)
var openedInfoWindow = null;
var bounds = new google.maps.LatLngBounds();
var map;
function initialize() {
var latitude = 21.1202644, longitude = 79.0418986, radius = 8000,
center = new google.maps.LatLng(latitude, longitude), mapOptions = {
center: center,
zoom: 10,
scrollwheel: false
};
// initialize the global map variable
map = new google.maps.Map(document.getElementById("map"), mapOptions);
- 扩展边界并在细节服务的回调函数内调用
map.fitBounds
function createMarker(data, map) {
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: data.placeid
}, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
var marker = new google.maps.Marker({
map: map,
place: {
placeId: data.placeid,
location: result.geometry.location
}
//position: result.geometry.location
});
bounds.extend(result.geometry.location);
map.fitBounds(bounds);
infoBox(map, marker, data, result);
});
}
概念验证小提琴
代码片段:
var placeid_json = [{
"placeid": 'ChIJu6HrLMVWIkcRWHTA90kiueI',
"content": " 1 "
}, {
"placeid": 'ChIJnXBuJ34zGUcRvt9FTKrPeeM',
"content": " 2 "
}, {
"placeid": 'ChIJiwUNhqX7PEcRdJjYqzrWYjs',
"content": " 3 "
}];
var openedInfoWindow = null;
var bounds = new google.maps.LatLngBounds();
var map;
function initialize() {
var latitude = 21.1202644,
longitude = 79.0418986,
radius = 8000,
center = new google.maps.LatLng(latitude, longitude),
mapOptions = {
center: center,
zoom: 10,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
setMarkers(center, radius, map);
}
function setMarkers(center, radius, map) {
var json = placeid_json;
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i];
createMarker(data, map);
}
}
function createMarker(data, map) {
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: data.placeid
}, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
var marker = new google.maps.Marker({
map: map,
place: {
placeId: data.placeid,
location: result.geometry.location
}
});
bounds.extend(result.geometry.location);
map.fitBounds(bounds);
infoBox(map, marker, data, result);
});
}
function infoBox(map, marker, data, result) {
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.content);
infoWindow.open(map, marker);
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.content + "<br>" + result.name);
infoWindow.open(map, marker);
});
})(marker, data);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
创建一个空的LatLngBounds对象。
var bounds = new google.maps.LatLngBounds();
对于每个标记,获取其位置。
var position = marker.getPosition();
扩展边界以包括该位置。
bounds.extend(position);
对所有标记执行此操作后,使贴图适合这些边界。
map.fitBounds(bounds);
相关文章:
- 如何在映射数组中添加换行符
- 使用Google'设置ID属性;s映射API
- 通过匹配id映射2数组
- HERE 映射 javascript API - 抛出“指针必须有 ID”错误
- 自动调整谷歌使用位置id映射多个标记
- 如何将url id映射到服务器上的内容
- Undercore将对象的数组映射到以id为键的新对象
- Metero 通过 id 从两个集合映射中获取数据
- 在类而不是 id 中加载映射
- SignalR IUserIdProvider未为用户ID和连接ID映射调用
- 通过对象列表将 ID 数组映射到字符串数组
- 在Node.js中创建id到套接字的映射,反之亦然
- 在jQuery/Javascript中映射id值和事件值
- 将名称映射到流星应用中的id
- 如何在d3教程中映射节点对象到节点id
- 打印编号映射到文档而不是id
- 维护服务器端映射代码的正确方法是什么抛出id'S在客户端
- twitter bootstrap-Xpages,需要全局变量将字段的新ID映射回字段的原始ID,以便可以与客户端Jav
- 是否可以使用“弱映射”或“弱集”从id中获取弱引用对象
- 在循环中使用对象进行映射,如何映射到特定的HTML类和id