Question

我正在使用非常基本的Google Maps api，我想知道我们是否可以使用“返回原点”类型的按钮，以便我们重定向回原始位置（也许可以缩放？）刷新地图。

示例代码

当前Javascript

function initialize() {
        /* ----- Variables ---------------------------------- */
        var myLat = 46.331302;
        var myLong = -72.554991;
        var iconURL = 'img/logo-map-marker-large.png';
        var myClose = "http://www.google.com/intl/en_us/mapfiles/close.gif";
        var bbl_bg = "url('img/tipbox.gif') no-repeat";
        /* ----- Scripted ----------------------------------- */
        var loc,map,marker,infobox;
        loc=new google.maps.LatLng(myLat,myLong);
        map=new google.maps.Map(document.getElementById("map"),
          {zoom:15,center:loc,mapTypeId:google.maps.MapTypeId.ROADMAP});
        marker=new google.maps.Marker({
          map:map,position:loc,
          icon:iconURL,visible:true});
        infobox=new InfoBox({
          content:document.getElementById("infobox"),
          disableAutoPan:false,
          maxWidth:150,
          pixelOffset:new google.maps.Size(-140,0),
          zIndex:null,
          boxStyle:{background:bbl_bg,
            opacity:0.75,
            width:"320px"
          },
          closeBoxMargin:"2px 2px 2px 2px",
          closeBoxURL:myClose,
          infoBoxClearance:new google.maps.Size(1,1)
        });
        google.maps.event.addListener(marker,"click",function(){
          infobox.open(map,this);
          map.panTo(loc)
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

当前HTML 包含“信息泡泡”

<div id="map" style="width: 100%; height: 300px"></div>
<div class="infobox-wrapper">
    <div id="infobox">
        <h3>Publi Design inc.</h3>
        <p>
            505, rue Père-Daniel <br />
            Trois-Rivières (Québec) G9A 5Z7  <br /> <br />

            <a href="tel:8193734071">819 373.4071</a> | 
            imagination@publidesign.com
        </p>
    </div>
</div>

也许我正在寻找的是另一个我没有找到的功能，但我认为当我们试图查看原点是什么以及周围有什么（地标，街道等）时，这会派上用场。 / p>

Answer 1

您可以随时在地图上调用setCenter和setZoom方法。如果您希望地图“返回原点”，那么您需要做的就是存储起始位置并在以后可以访问的变量中开始缩放级别。

Answer 2

将此添加到初始化例程的末尾（并添加id =“reset”的按钮）：

google.maps.event.addDomListener(document.getElementById("reset"), 'click', function() {
    map.setCenter(loc);
    map.setZoom(15);
});

jsfiddle

Answer 3

您必须将其存储在变量中。 Google Maps API不会为您提供这些设置。

Google地图返回原点

示例代码

3 个答案: