缩放功能谷歌地图 [英] Zoom function Google maps

问题描述

我在信息窗口中创建了一个按钮，需要平移到标记，然后放大，但我无法使其工作。下面是我的缩放功能

  function Zoom（）{
 google.maps.event.addListener（marker，'click '，function（）{
 map.panTo（marker.position）; 
 map.setZoom（18）; 
}）; 
  

，这个函数创建标记并用下面的html填充信息窗口。

  function createMarker（latlng，name，woonplaats，prijs，perceelop，woonop，address）{
 var html =< a href =+ address +>+< b>+ name +< / b>< / a>< br /> 
 + woonplaats +< / br> + woonop +/+ perceelop +< / br> +€+ prijs + 
< / br>< input id ='zoombutton'type ='button'onclick ='Zoom（）'value ='Zoom in'/> 
 var marker = new google.maps.Marker（{
 map：map，
 position：latlng 
}）; 
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
 }）; 
 markers.push（marker）; 
} 
  

如果我删除panTo函数，它会放大，但它不会平移到标记，以便放大到完全不同的位置。如果缩放级别为18或更高，但没有结果，我也试图使按钮不可见。

任何帮助都将得到高度赞赏！

marker.position 是一个未记录的参数（如果存在的话）。使用 marker.getPosition（）获取标记的位置。

 函数Zoom（）{
 google.maps.event.addListener（marker，'click'，function（）{
 map.panTo（marker.getPosition（））; 
 map.setZoom（18 ）; 
}）; 
 // ?? 
} 
  

我的代码出现javascript错误： Uncaught ReferenceError：marker is not defined

• 不确定为什么要将点击侦听器添加到 marker 在按钮onclick函数中


• ，您将需要保持对所有标记的引用（假设有多个标记）

  //在全局范围内：
 var markers = [] ; 
 
函数Zoom（markerNum）{
 // markerNum是marker数组中标记的索引
 map.panTo（markers [markerNum] .getPosition（））; 
 map.setZoom（18）; 
} 
  

工作小提琴

程式码片段：
$ b

  var map; var markers = []; var infoWindow = new google.maps.InfoWindow（）; function initialize（）{map = new google.maps.Map（document.getElementById （map_canvas），{center：new google.maps.LatLng（37.4419，-122.1419），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}）; createMarker（map.getCenter（），Palo Alto​​）; createMarker（{lat：37.42410599999999，lng：-122.1660756}，Stanford）;} function createMarker（latlng，name）{var html = name +< / br>< input id ='zoombutton'type ='button 'onclick ='缩放（+ markers.length +）'value ='放大'/> var marker = new google.maps.Marker（{map：map，position：latlng}）; google.maps.event.addListener（marker，'click'，function（）{infoWindow.setContent（html）; infoWindow.open（map，marker）;}）; marker.push（marker）;} Zoom（markerNum）{map.panTo（markers [markerNum] .getPosition（））; map.setZoom（18）;} google.maps.event.addDomListener（window，load，initialize）;  

  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//   

I've created a button inside my info window that needs to pan to the marker and then zoom in but I can't get it to work. Below is my Zoom function

function Zoom(){
google.maps.event.addListener(marker, 'click', function() { 
    map.panTo(marker.position);
    map.setZoom(18);
}); 

and this the function that creates the marker and fills the info window with the html below.

function createMarker(latlng, name, woonplaats, prijs, perceelop, woonop, address) {
  var html ="<a href="+address+">"+"<b>"+name+"</b></a> <br/>" 
            + woonplaats +"</br>" + woonop + "/ " + perceelop + "</br>" + "€ " + prijs + 
            "</br><input id='zoombutton' type='button' onclick='Zoom()' value='Zoom in' />" 
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  markers.push(marker);
}

If I remove the panTo function it does Zoom in, but it doesn't pan to the marker so it zooms in in a totally different place. I also tried to make the button invisible if the zoom level is 18 or higher but with no result.

Any help will be highly appreciated!

解决方案

marker.position is an undocumented parameter (if it exists). Use marker.getPosition() to get the marker's position.

function Zoom(){
  google.maps.event.addListener(marker, 'click', function() { 
    map.panTo(marker.getPosition());
    map.setZoom(18);
  }); 
// ??
}

I get a javascript error with your code though: Uncaught ReferenceError: marker is not defined

• not sure why you are adding a click listener to marker in the button onclick function
• you will need to keep references to all your markers (assuming there is more than one)

// in the global scope:
var markers = [];

function Zoom(markerNum) {
  // markerNum is the index of this marker in the markers array
  map.panTo(markers[markerNum].getPosition());
  map.setZoom(18);
}

working fiddle

code snippet:

var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  createMarker(map.getCenter(), "Palo Alto");
  createMarker({
    lat: 37.42410599999999,
    lng: -122.1660756
  }, "Stanford");
}

function createMarker(latlng, name) {
  var html = name + "</br><input id='zoombutton' type='button' onclick='Zoom(" + markers.length + ")' value='Zoom in' />"
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  markers.push(marker);
}

function Zoom(markerNum) {
  map.panTo(markers[markerNum].getPosition());
  map.setZoom(18);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?"></script>
<div id="map_canvas"></div>

这篇关于缩放功能谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！