javascript - 谷歌地图在点上自动居中
问题描述
我有这个代码:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
#map_canvas {
border:1px solid transparent;
height: 400px;
width: 100%;
}
</style>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 padding_all_right_4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_all_3">
<h2 class="h2">Atrakcje w okolicy</h2>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href ="#" class="obj-1" id="obj-1">
<div class="apartament_atrakcje">Atrakcja 1 pl</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href ="#" class="obj-2" id="obj-2">
<div class="apartament_atrakcje">Atrakcja 2 PL</div>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_all_0">
<div class="apartament_mapa">
<div id="map_canvas"></div>
<script>
var locations = [
['Atrakcja 1 pl', 51.73925413, 19.51309225, 1],
['Atrakcja 2 PL', 53.41475000, 14.60220358, 2],
];
var map;
var markers = [];
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: i,
});
google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content:this.html,
position:this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}
init();
</script>
该脚本在谷歌地图上显示 2 个点。我在将地图集中在这些点上时遇到问题。目前,我在页面代码中输入地图居中的坐标,但是地图上的点是从 CMS 添加的,并且必须自动居中:(
有谁知道该怎么做?
解决方案
你需要集中在一点上吗?scaisEdge答案将为您做到这一点。
map.setCenter(new google.maps.LatLng(lat, lng));
否则,如果您需要以这两点的“中心”为中心。您需要计算这两者之间的中心点,然后以这个新的 LatLong 为中心。为此,您可以查看Google Maps Javascript API 和 stackoverflow 的这篇文章:Find center of multiple locations in Google Maps
推荐阅读
- node.js - 节点错误 npm ERR!在 Angular 项目中使用 npm install 时从未调用 cb()
- python - 如何统计UCREL语义分析系统(USAS)加载的语义标签的出现次数
- mysql - DELETE TOP 语句的正确语法是什么?
- python - discord.py wait_for('reaction_add') 无法正常工作
- java - Getting Null value after bind method called in Reference object of OSGI
- javascript - 集合之间可以发生 NoSQL 注入吗?
- ios - 如果堆栈大小> 1,则弹出后 SwiftUI3 导航链接不起作用
- php - GET 小写字母和大写字母 PhP
- mysql - MySQL 查询将自身限制在某些日期 - 为什么?
- python - Plotly:如何创建一个下拉按钮,对折线图中的线进行分组?