Question

关于谷歌地图缩放的一个小问题。我想用我的＆＃34;自己的缩放＆＃34;制作一个酒吧范围。这是它的样子，这是我的代码。

我的代码：

＆＃13;

handleValuesChange(component, values) {
    this.setState({
      values: values,
    });
    if(values === 500){
      this.setState({nbLatLn: 0.004})
    }
    if(values === 1000){
      this.setState({nbLatLn: 0.008})
    }
    if(values === 1500){
      this.setState({nbLatLn: 0.012})
    }
    if(values === 2000){
      this.setState({nbLatLn: 0.016})
    }
    if(values === 2500){
      this.setState({nbLatLn: 0.020})
    }
    if(values === 3000){
      this.setState({nbLatLn: 0.024})
    }
    if(values === 3500){
      this.setState({nbLatLn: 0.028})
    }
    if(values === 4000){
      this.setState({nbLatLn: 0.032})
    }
    if(values === 4500){
      this.setState({nbLatLn: 0.036})
    }
    if(values === 5000){
      this.setState({nbLatLn: 0.04})

    }
  }
  
  
  /////////////////
  
  
  
  <Segment textAlign='center'>
                  <Container className="TailleRange">
                    <InputRange 
                      maxValue={5000}
                      minValue={500}
                      formatLabel={values => `${values}m`}
                      step={500}
                      value={this.state.values}
                      onChange={this.handleValuesChange.bind(this)}/>
                  </Container>
</Segment>

＆＃13;

但它不起作用，你想找到这个小问题吗？我继续研究！：）

Answer 1

这个问题有点不清楚，标记是至关重要的，至少没有明显的迹象表明javascript代码如何与谷歌地图联系，但可能以下可能有用。

你可以快速查看它所具有的功能，可以简化很多，如下所示。

<div class='slidecontainer'>
  <input type='range' min='500' max='5000' value='2250' step=500 class='slider' id='zoom-slider' />
</div>

<script>
    var slider=document.getElementById('zoom-slider');

    var handleValuesChange=function( event ){
        /* every step of 500 increases nbLatLn by this amount */
        var i=0.004;

        /* emulate callback method `this.setState()` */
        var setState=function( v ){
            return { nbLatLn: v };
        }
        /* calculate the value to set */
        var n=( ( this.value / 500 ) * i ).toPrecision(2);

        /* return object */
        return setState( n );
    }



    /* one of the ways you could call the function */
    slider.onchange=function(event){

        /* use this value somewhere, somehow to change map zoom */
        var state=handleValuesChange.bind( this ).call( this, event );

        /* do something with returned Object */
        console.log( state )
    }.bind( slider );
</script>

或者，将滑块直接绑定到map方法setZoom（更改apikey以作为demo运行）会更简单。

<html>
    <head>
        <script async defer src="//maps.google.com/maps/api/js?key=<APIKEY>&callback=initMap"></script>
        <script>
            var map;

            function initMap(){
                var options = {
                    zoom: 10,
                    center: new google.maps.LatLng(52.478595, -1.889729),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map( document.getElementById('map'), options );

                var slider=document.getElementById('zoom-slider');
                var span=document.getElementById('zoom');
                    span.innerHTML=map.getZoom();


                slider.onchange=function(e){
                    var zoom=parseInt( this.value ) / 250;
                    map.setZoom( zoom );
                    span.innerHTML=zoom;
                }.bind( slider );
            }

        </script>
        <style type="text/css">
            #map {
                width: 100%;
                height: 80vh;
                margin-top: 10px;
            }
            .container {
                width: 50%;
                float:none;
                margin:1rem auto;
            }
            .slider {
                -webkit-appearance: none;
                width: 100%;
                height: 5px;
                border-radius: 5px;   
                background: #d3d3d3;
                outline: none;
                opacity: 0.7;
                -webkit-transition: .2s;
                transition: opacity .2s;
            }
            .slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 15px;
                height: 15px;
                border-radius: 50%; 
                background: red;
                cursor: pointer;
            }
            .slider::-moz-range-thumb {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: red;
                cursor: pointer;
            }
            #zoom{
                display:block;
                width:2rem;
                padding:1rem;
                box-sizing:border-box;
                clear:none;
                margin:1rem auto;
            }
        </style>
    </head>
<body>
    <div id='map'></div>
    <div class='container'><span id='zoom'></span>
      <input type='range' min='250' max='5000' value='2500' step=250 class='slider' id='zoom-slider' />
    </div>
</body>
</html>

Answer 2

是的，对不起，我的代码的其余部分还不够精确

createMap() {
  this.state.map = new window.google.maps.Map(document.getElementById('map'), {
    center: {lat: this.state.lat, lng: this.state.long},
    zoom: this.state.zoom
  });
let southWest = new window.google.maps.LatLng(this.state.lat-0.016,this.state.long-0.016);
let northEast = new window.google.maps.LatLng(this.state.lat+0.016,this.state.long+0.016);
let bounds = new window.google.maps.LatLngBounds(southWest,northEast);
this.state.map.fitBounds(bounds);
  new window.google.maps.Marker({
    position: {lat: this.state.lat, lng: this.state.long},
    map:  this.state.map
  });
  this.state.Parking.map((element) => {
    let marker = new window.google.maps.Marker({
      position: {lat: element.latitude, lng: element.longitude},
      icon: POI,
      map:  this.state.map
    });
    let contentString = '<div class="InfoWindow" ' + '<h2>' + element.title + '</h2>' + '<p>' + element.number + element.street + '<br/>'+
      element.postcode + element.city + '</p>' + '<p>'+'10min  1.2km' + '</p>'+ '</div>';
    if (marker && contentString) {
      this.addInfoWindowToMarker( this.state.map, marker, contentString, element.idPark)
    }
  });

}

谷歌地图缩放范围

2 个答案: