如何根据city_id将地图居中？ [英] How to center the map according to city_id?
本文介绍了如何根据city_id将地图居中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
根据标记对地图进行缩放和居中。
我如何根据标记对地图进行缩放和居中。例如，显示的所有标记都是迪拜，所以我想中心地图迪拜，如果所有的标记是美国我想缩放和中心到美国。
这是我的代码，任何人都可以帮助我。
test.php
<？php
$ sql =<<<< EOF
来自标记的SELECT *
EOF;
$ result = $ db-> query（$ sql）;
$ yourArray = array（）;
$ index = 0;
while（$ row = $ result-> fetchArray（SQLITE3_ASSOC））{
$ json [] = array（
'lat'=> $ row ['latitude']，
'lon'=> $ row ['longitude']，
'name'=> $ row ['name']，
'city_id' => $ row ['city_id']
）;
}
$ db-> close（）;
？>
<！DOCTYPE html>
< html>
< head>
< style>
#map {
height：400px;
宽度：100％;
}
< / style>
< / head>
< body>
< h3>< / h3>
< div id =mapalign =left>< / div>
< script async defer src =https://maps.googleapis.com/maps/api/js?key=AIzaSyDj38Snh4MEIsomOlTZfARryo7V8A_qk9o&libraries=places&callback=initMap>
< / script>
<？php json_encode（$ json，JSON_PRETTY_PRINT）？>
< script type =text / javascript>
函数initMap（）{
debugger;
var locationsJSON =<？php echo json_encode（$ json，JSON_PRETTY_PRINT）？>
var locations = locationsJSON;
for（i = 0; i< locations.length; i ++）{
if（location [i] .city_id == 1）
{
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：4，
center：new google.maps.LatLng（31.5546，74.3572），
mapTypeId ：google.maps.MapTypeId.ROADMAP
}）;
}
else if（location [i] .city_id == 2）
{
var map = new google.maps.Map（document.getElementById（'地图'），{
zoom：4，
center：new google.maps.LatLng（25.2048,55.2708），
mapTypeId：google.maps.MapTypeId.ROADMAP
}） ;
var geocoder = new google.maps.Geocoder（）;
var infowindow = new google.maps.InfoWindow（）;
var marker，i;
for（i = 0; i< locations.length; i ++）{
console.log（locations [i]）;
var myLatLng = new google.maps.LatLng（locations [i] .lat，locations [i] .lon）;
marker = new google.maps.Marker（{
position：myLatLng，
map：map
}）;
google.maps.event.addListener（marker，'click'，function（evt）{
var mark = this;
geocoder.geocode（{
location：evt.latLng
}，function（results，status）{
if（status ==OK）{
infowindow.setContent（results [0] .formatted_address +< br>+ results [0] .geometry.location.toUrlValue（6））;
infowindow.open（map，mark）;
}
}）;
}）;
};
}
google.maps.event.addDomListener（window，load，initMap）;
< / script>
< / body>
< / html>
解决方案
您可以使用google.maps的fitBounds .Map class
https://developers.google.com/maps/documentation/javascript/reference#Map
您可以在代码介绍中修改initMap（）函数边界和调用fitBounds（）。检查我的以开头的注释//添加：
函数initMap ）{
调试器;
var locationsJSON =<？php echo json_encode（$ json，JSON_PRETTY_PRINT）？>
var locations = locationsJSON;
for（i = 0; i< locations.length; i ++）{
if（location [i] .city_id == 1）
{
var map = new google.maps.Map（document.getElementById（'map'），
{
zoom：4，
center：new google.maps.LatLng（31.5546，74.3572），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
}
else if（location [i] .city_id == 2）
{
var map = new google.maps.Map（document.getElementById（'地图'），{
zoom：4，
center：new google.maps.LatLng（25.2048,55.2708），
mapTypeId：google.maps.MapTypeId.ROADMAP
}） ;
var geocoder = new google.maps.Geocoder（）;
var infowindow = new google.maps.InfoWindow（）;
//添加：创建边界
var bounds = new google.maps.LatLngBounds（）;
var marker，i;
for（i = 0; i< locations.length; i ++）{
console.log（locations [i]）;
var myLatLng = new google.maps.LatLng（locations [i] .lat，locations [i] .lon）;
marker = new google.maps.Marker（{
position：myLatLng，
map：map
}）;
//增加：用新坐标延伸边界
bounds.extend（myLatLng）;
google.maps.event.addListener（marker，'click'，function（evt）{
var mark = this;
geocoder.geocode（{
location ：evt.latLng
}，function（results，status）{
if（status ==OK）{
infowindow.setContent（results [0] .formatted_address +< br> ;+ results [0] .geometry.location.toUrlValue（6））;
infowindow.open（map，mark）;
}
}）;
}）;
};
//增加：适合边界
map.fitBounds（bounds）;
}
希望这有助于您！
Zoom and center the map according to its markers.
How i can zoom and center the map according to its markers.For example,All the markers displayed are of dubai so i want to center the map to dubai,if all the markers are of USA i want to zoom and center it to USA. this is my code anyone help me please.
test.php
<?php
$sql=<<<EOF
SELECT * from markers;
EOF;
$result = $db->query($sql);
$yourArray = array();
$index = 0;
while($row = $result->fetchArray(SQLITE3_ASSOC) ){
$json[] = array(
'lat' => $row['latitude'],
'lon' => $row['longitude'],
'name' => $row['name'],
'city_id'=>$row['city_id']
);
}
$db->close();
?>
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3></h3>
<div id="map" align="left"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDj38Snh4MEIsomOlTZfARryo7V8A_qk9o&libraries=places&callback=initMap">
</script>
<?php json_encode($json, JSON_PRETTY_PRINT) ?>
<script type="text/javascript">
function initMap() {
debugger;
var locationsJSON = <?php echo json_encode($json, JSON_PRETTY_PRINT) ?>;
var locations = locationsJSON;
for (i = 0; i < locations.length; i++) {
if(location[i].city_id==1)
{
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(31.5546, 74.3572),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
else if(location[i].city_id==2)
{
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(25.2048,55.2708),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
}
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
console.log(locations[i]);
var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
var mark = this;
geocoder.geocode({
location: evt.latLng
}, function(results, status) {
if (status == "OK") {
infowindow.setContent(results[0].formatted_address + "<br>" + results[0].geometry.location.toUrlValue(6));
infowindow.open(map, mark);
}
});
});
};
}
google.maps.event.addDomListener(window, "load", initMap);
</script>
</body>
</html>
解决方案
You can use fitBounds() method of google.maps.Map class
https://developers.google.com/maps/documentation/javascript/reference#Map
You can modify the initMap() function in your code introducing the bounds and calling fitBounds(). Check my comments that start with //Added:
function initMap() {
debugger;
var locationsJSON = <?php echo json_encode($json, JSON_PRETTY_PRINT) ?>;
var locations = locationsJSON;
for (i = 0; i < locations.length; i++) {
if(location[i].city_id==1)
{
var map = new google.maps.Map(document.getElementById('map'),
{
zoom: 4,
center: new google.maps.LatLng(31.5546, 74.3572),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
else if(location[i].city_id==2)
{
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(25.2048,55.2708),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
}
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
//Added: create bounds
var bounds = new google.maps.LatLngBounds();
var marker, i;
for (i = 0; i < locations.length; i++) {
console.log(locations[i]);
var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
//Added: extend bounds with new coordinate
bounds.extend(myLatLng);
google.maps.event.addListener(marker, 'click', function(evt) {
var mark = this;
geocoder.geocode({
location: evt.latLng
}, function(results, status) {
if (status == "OK") {
infowindow.setContent(results[0].formatted_address + "<br>" + results[0].geometry.location.toUrlValue(6));
infowindow.open(map, mark);
}
});
});
};
//Added: fit the bounds
map.fitBounds(bounds);
}
Hope this helps!
这篇关于如何根据city_id将地图居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
