Question

我的地图上有一个自定义标记，地图上方有一个图像，我想点击它，将谷歌地图置于自定义标记的中心，图像被链接到。我如何用谷歌api做到这一点？我很难搞清楚google api代码可以做什么，有人能告诉我一个例子吗？

我正在尝试将其添加到companyimage变量

<!DOCTYPE html> <html> <head>
<LINK REL=StyleSheet HREF="styles.css" TYPE="text/css" MEDIA=screen>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0px; padding: 0px }
 #map_canvas { height: 100% }
</style>
  <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    function initialize() {
      var latlng = new google.maps.LatLng(39.346246,-76.624446);
   var myOptions = {
     zoom: 15,
     center: latlng,
     mapTypeControl: true,
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
     navigationControl: true,
     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
     mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map = new google.maps.Map(document.getElementById("map_canvas"),
       myOptions);
       var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
                '<div id="bodyContent">'+
                '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
                      '</div>'+
                   '</div>';
                  var infowindow = new google.maps.InfoWindow({
                content: contentString
               });

     var companyImage = new google.maps.MarkerImage('images/Loyola.png',
                    new google.maps.Size(100,50),
                    new google.maps.Point(0,0),
                   new google.maps.Point(50,50)
                  );

               var companyShadow = new    google.maps.MarkerImage('images/logo_shadow.png',
                   new google.maps.Size(130,50),
                   new google.maps.Point(0,0),
                   new google.maps.Point(65, 50));

                  var companyPos = new google.maps.LatLng(39.346246,-76.624446);

                  var companyMarker = new google.maps.Marker({
                position: companyPos,
                map: map,
                icon: companyImage,
                shadow: companyShadow,
                title:"School",
                zIndex: 3});

                var trainImage = new google.maps.MarkerImage('images/barlandmark.png',
                new google.maps.Size(70,70),
                new google.maps.Point(0,0),
                new google.maps.Point(50,50)
            );

            var trainShadow = new google.maps.MarkerImage('images/train_shadow.png',
                new google.maps.Size(70,50),
                new google.maps.Point(0,0),
                new google.maps.Point(60, 50)
            );

               var trainPos = new google.maps.LatLng(39.363136,-76.609841);

               var trainMarker = new google.maps.Marker({
                position: trainPos,
                map: map,
                icon: trainImage,
                shadow: trainShadow,
                title:"Train Station",
                zIndex: 2
            });

}

Answer 1

使用jquery和google API V-3，您可以使用

$("#yourImage").click(function(e){
    YOURMAP.setCenter(mapLat,mapLng); // add real lng and lat 
});

将var YOURMAP指向地图，并将lat和lng指向该点，并根据需要调整大小。

Answer 2

http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html#Map

yourMap.panTo( yourMarker.getPosition() );

Answer 3

你需要做这样的事情：

<script>
$(document).ready(function(){
    $("#img").live('click',function(){
        var pos = new google.maps.LatLng(lat,lng);
        map.setCenter(pos);
    });
});
</script>

或者

<script>
$(document).ready(function(){
    $("#img").live('click',function(){
        var pos = marker.getPosition();
        map.setCenter(pos);
    });
});
</script>

并确保更改图片的ID以匹配选择器。

<img src='someimage.jpg' id ='img' />

确保使用创建的地图的名称替换地图。将标记替换为您创建的标记的名称。如果使用第一个示例，请将lat / lng替换为正确的位置。

用于API V3的Google Maps事件

http://code.google.com/apis/maps/documentation/javascript/events.html

将图像链接到谷歌地图上的标记

3 个答案: