如何在PHP中缩小谷歌地图

Question

我正在使用这个src http://maps.googleapis.com/maps/api/js?sensor=false如何在我自动运行时更改应用程序中的缩放显示我的指针可以帮助

这是我试过的：

<script>
            var map = null;
            var infowindow = new google.maps.InfoWindow();
            var bounds = new google.maps.LatLngBounds();
            var markers = [
                    /*{
                     "lat": '12.916517',
                     "lng": '79.132499',
                     }
                     ,
                     {
                     "lat": '12.5904049',
                     "lng": '78.62851409999999',
                     },*/
            <?php
            $long = $rider->lng;
            $lat = $rider->lat;
            $routes = array("lng" => $long, "lat" => $lat);
            $route_points = array($routes);
            foreach ($route_points as $points) {
                ?>
                                {
                                "lat": <?php echo "'" . $points['lat'] . "'"; ?>,
                                        "lng": <?php echo "'" . $points['lng'] . "'"; ?>,
                                },
                <?php
            }
            ?>

            ];
            window.onload = function () {
            var mapOptions = {
            center: new google.maps.LatLng(
                    parseFloat(markers[0].lat),
                    parseFloat(markers[0].lng)),
            zoom: 12,

            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
                    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
                    var infoWindow = new google.maps.InfoWindow();
                    var lat_lng = new Array();
                    var latlngbounds = new google.maps.LatLngBounds();
                    for (i = 0; i < markers.length; i++) {
            var data = markers[i]
                    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                    lat_lng.push(myLatlng);
                    var marker = new google.maps.Marker({
                    position: myLatlng,
                            map: map,
                            title: data.title
                    });
                    latlngbounds.extend(marker.position);
                    (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                    });
                    })(marker, data);
            }
            map.setCenter(latlngbounds.getCenter());
                    map.fitBounds(latlngbounds);
                    //***********ROUTING****************//

                    //Intialize the Path Array
                    var path = new google.maps.MVCArray();
                    //Intialize the Direction Service
                    var service = new google.maps.DirectionsService();
                    //Set the Path Stroke Color
                    var poly = new google.maps.Polyline({map: map, strokeColor: '#4986H7'});
                    //Loop and Draw Path Route between the Points on MAP
                    for (var i = 0; i < lat_lng.length; i++) {
            if ((i + 1) < lat_lng.length) {
            var src = lat_lng[i];
                    var des = lat_lng[i + 1];
                    path.push(src);
                    poly.setPath(path);
                    service.route({
                    origin: src,
                            destination: des,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                    }, function (result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                    path.push(result.routes[0].overview_path[i]);
                    }
                    }
                    });
            }
            }
            }
</script>

我的输出： enter image description here

Answer 1

如果您想在创建地图时设置不同的缩放值，请根据API文档使用 mapOptions 对象中的缩放属性：google.maps.Map ，google.maps.MapOptions

Answer 2

它无法通过PHP完成，你可以通过Javascript来实现： -

＆＃13;

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false&region=AU">
    </script>



<script type="text/javascript">

function HomeControl(controlDiv, map) {

 google.maps.event.addDomListener(zoomout, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 0){
     map.setZoom(currentZoomLevel - 1);}     
  });

   google.maps.event.addDomListener(zoomin, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 21){
     map.setZoom(currentZoomLevel + 1);}
  });

}

var map;
var markersArray = [];


function initialize() {

  var mapDiv = document.getElementById('map-canvas');
  var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
  var mapOptions = {
    zoom: <?php echo $zoom; /* you can set zoom variable according to your need */ ?>,
    center: myLatlng,
    Marker: true,
    panControl: false,
    zoomControl: false,
    streetViewControl: false,
    overviewMapControl: false,
     mapTypeControl: false,
     mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(mapDiv, mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"
  });

  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

}

google.maps.event.addDomListener(window, 'load', initialize);    

</script>

</head>




  <body>
    <div id="map-canvas"></div>
    <div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
    <div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>
  </body>
</html>

＆＃13;

＆＃13;

＆＃13;