將圖像鏈接到谷歌地圖上的標記

Question

我的 map 上有一個自定義標記，地圖上方有一個圖像，我想點擊它，將谷歌 map 居中放在自定義標記上，圖像鏈接到。 我將如何使用谷歌 api 做到這一點？ 我很難弄清楚谷歌 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 和谷歌 API V-3 你可以使用

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

將 var YOURMAP 指向 map 和 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' />

確保將 map 替換為您創建的 map 的名稱。 將標記替換為您創建的標記的名稱。 如果使用第一個示例，請將 lat/lng 替換為正確的位置。

API V3 的 Google 地圖事件

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

將圖像鏈接到谷歌地圖上的標記

問題描述

3 個解決方案

解決方案1
0 已采納 2011-07-11 18:33:57

解決方案2
0 2011-07-11 18:37:36

解決方案3
0 2011-07-11 18:40:10

將圖像鏈接到谷歌地圖上的標記

問題描述

3 個解決方案

解決方案1 0 已采納 2011-07-11 18:33:57

解決方案2 0 2011-07-11 18:37:36

解決方案3 0 2011-07-11 18:40:10

解決方案1
0 已采納 2011-07-11 18:33:57

解決方案2
0 2011-07-11 18:37:36

解決方案3
0 2011-07-11 18:40:10