在谷歌地图上创建放大和缩小工具按钮

时间:2015-07-10 09:52:49

标签: html css button

我正在尝试在我的网站上创建放大和缩小工具,以便在Google地图上进行缩放。我选择了我创建的工具后尝试放大或缩小地图上的任何特定位置,现在想要通过选择工具放大或缩小地图如何可能任何帮助对我来说都很棒,这是我的按钮代码

<button name="button" value="" type="button" id="zoomIn"></button>
<button name="button" value="" type="button" id="zoomOut"></button>

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="zoom.js"></script>
<script>
    var mapCanvas;

  function initialize() {
    mapCanvas = document.getElementById('mapviewer');
    var mapOptions = {
      center: new google.maps.LatLng(28.61, 77.20),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  function zoom_in(){
      mapCanvas.zoomIn();
  }
  function zoom_out(){
      mapCanvas.zoomOut();
  }
</script>

1 个答案:

答案 0 :(得分:1)

通过将mapCanvas.zoomIn();更改为

来尝试此操作
map.setZoom(map.getZoom()+1);