个人中心
gpt4 book ai didi

javascript - Google Maps API - 自动居中和自动缩放

转载 作者：行者123 更新时间：2023-11-28 06:37:50 26 4
gpt4 key购买 nike

我无法在从 CSV 文件创建的 map 上安装自动居中和自动缩放，该文件进入 PHP 数组然后传输到 JavaScript——代码如下 - 

<!DOCTYPE html>

<?php

include "getCsvData.php";   // this is where we put the data into a PHP array called $dataArray;
// now we exit the PHP and do the HTML including our Javascript...

?>

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet"
          type="text/css"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var geocoder;
        var map;
        var markers = [];
        var image = {
            url: 'src/icon' + 'a.png'
            ,
        };

        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(0, 0);
            var myOptions = {
                zoom: 7,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            <?php
            for($i = 0, $j = count($postcodes); $i < $j - 1 ; $i++) {
            ?>
            addPostCode(<?php echo str_replace(array('[', ']'), '', json_encode($postcodes[$i])); ?>);
            <?php } ?>
        }
        function addPostCode(zip) {
            geocoder.geocode({'address': zip}, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        icon: image,
                        position: results[0].geometry.location,
                        name: zip
                    });
                    markers.push(marker);
                    // latlng.extend(marker.position);
                } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    setTimeout(function () {
                        Geocode(address);
                    }, 200);
                }

                else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });

        }

    </script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height:90%"></div>
</body>
</html>

我发现我需要使用 fitBounds，但我似乎无法让它工作，要么页面未加载，要么它只集中在一个结果上，然后我必须缩小。

最佳答案

这是我针对这种情况的设置，请注意，我在这里使用 window 以便我可以从任何范围访问 Google 对象。您需要使用 extend() 方法将每个标记添加到 mapBounds 并传递 position。 

$(function(){

    window.gMap = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 10,
            center: {lat: 37.769, lng: -122.446}
        });

   var addresses = ["296 Gingerbread St", "383 Hoskins Ct", "1608 Liege Dr", "519 Mandalay Ct", "342 Pleasant Summit Dr", "1757 Quiver Point Ave", "174 Rising Mesa Ct", "26 Silica Sand St", "192 Thunder Plains Way", "277 Timber Hollow St", "367 Via Pacifico", "382 Washtenaw St"];
   
   var timeOut = 0;
   $.each(addresses, function(i, address){
      setTimeout(function(){ addMarker(address) }, timeOut);
      timeOut = timeOut+1600;
   });

});



function addMarker(address) {
            geoCoder.geocode({'address': address}, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                    gMap.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: gMap,
                        position: results[0].geometry.location,
                    });
                    markers.push(marker);
                    //extend the bounds to include each marker's position
                    mapBounds.extend(marker.position);
                    //now fit the map to the newly inclusive bounds
                    gMap.fitBounds(mapBounds);
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
}
#map-canvas {
  width:80%;
  padding-left:15px;
  padding-right:15px;
  height:300px;
  border:2px solid #e8e8e8;
  border-radius:4px;
  margin:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function initMap() {
        window.mapBounds = new google.maps.LatLngBounds();
        window.geoCoder  = new google.maps.Geocoder();
        window.markers = [];
}  
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map-canvas"></div>

关于javascript - Google Maps API - 自动居中和自动缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34527090/

26 4 0
文章推荐： c++ - 单独的类文件错误？
文章推荐： ios - UIKeyboardWillHideNotification 动画延迟
文章推荐： javascript - FlipClock 倒计时器显示给定日期和时间错误
文章推荐： c++ - 动态可调阵列和 OpenMP
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com