控制缩放比例使用外部按钮

-1

我已经花了很多时间试图弄清楚这是否可能，并且我一直无法弄清楚。控制缩放比例使用外部按钮

我有一个谷歌地图，有一组标记放置在不同的城镇。我的地图外面还有几个按钮，即Pan，Lng位置。所以基本上，我有一张地图，外面带有城镇或城市名称的按钮，当用户点击按钮时，它会转到地图上的位置。

但是我想要做的是当点击按钮时缩放到不同的级别。

我的问题是，当地图初始化，我把它缩小，以便用户可以看到所有的标记，但是当用户点击一个特定的位置，我想在地图中被放大。

这甚至可能吗？

这里是我的html按钮的代码：

<btn style="cursor:pointer" class="location" data-location="50.0515016,-110.7794323">Medicine Hat</btn>

然后我的js代码部分：

var marker; 

function pan(latlon) { 
    var coords = latlon.split(","); 
    var panPoint = new google.maps.LatLng(coords[0], coords[1]); 

    map.panTo(panPoint) 
} 

var map; 

function initialize() { 

    var mhbrewco = { 
    lat: 50.062254, 
    lng: -110.71656 
    } 
    var mapOptions = { 
    zoom: 6, 
    center: new google.maps.LatLng(52.086594, -113.307591), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    scrollwheel: false, 
    mapTypeControl: false, 
    streetViewControl: false 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var BrewIcon = 'http://medicinehatbrewingcompany.ca/wp-content/uploads/2016/08/favicon-32x32-1.png'; 

    marker = new google.maps.Marker({ 
    map: map, 
    position: mhbrewco, 
    icon: BrewIcon 
    }); 

    var contentString = '<div id="content">' + 
    '<div id="siteNotice">' + 
    '</div>' + 
    '<h1 id="firstHeading" class="firstHeading">Medicine Hat Brewing Company</h1>' + 
    '<div id="bodyContent">' + 
    '<p><b>Address:</b>' + 
    ' 1366 Brier Park Dr NW' + 
    ' Medicine Hat, AB T1C 1Z7</p>' + 
    '<p><b>Phone:</b> <a href="tel:+14035251260">(403)525-1260</a>' + 
    '</div>' + 
    '</div>'; 

    var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
    }); 

    marker.addListener('click', function() { 
    infowindow.open(map, marker); 
    }); 

    jQuery(document).ready(function($) { 
    $('.location').on('click', function() { 
     pan($(this).data('location')); 
    }); 
    });

下面是该页面的链接我的工作：http://medicinehatbrewingcompany.ca/find-our-brews/

随着我想到了一个评论的帮助..只需要添加一点点的代码行：

jQuery(document).ready(function($) { 
    $('.location').on('click', function() { 
    map.setZoom(12); 
     pan($(this).data('location')); 
    });

来源

2017-04-18 Jimmy Adams

我相信你必须在你的panTo方法之前调用map.setZoom(2);。

所以，你的FN应该是这样的：

function pan(latlon) { 
    var coords = latlon.split(","); 
    var panPoint = new google.maps.LatLng(coords[0], coords[1]); 
    map.setZoom(10); // or whatever lvl of zoom desired 
    map.panTo(panPoint); 
}

来源

2017-04-18 18:45:10 sesamechicken

谢谢，我正在这一点比它需要更加困难。我用你的想法，只是改变了代码行 'jQuery的（文件）。就绪（函数（$）{ $（ '位置 '）。在（' 点击'，函数（）{ map.setZoom （12）; pan（$（this）.data（'location'））; }）; }）;' –

控制缩放比例使用外部按钮

回答

相关问题