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

发布于 2024-11-19 15:35:40 字数 3642 浏览 0 评论 0原文

我的地图上有一个自定义标记，地图上方有一个图像，我希望单击该图像，将谷歌地图置于自定义标记上，图像链接到。我该如何使用 google 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
            });

}

原文

I have a custom marker on my map, and an image above the maps, which I would like to have on click, center the google map on the custom marker, the image is linked to. How would I do that with google api? I am terrible with figuring out what google api code could do this, could someone show me an example?

I am trying to add it to the companyimage variable

<!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
            });

}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浮生未歇 2024-11-26 15:35:40

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

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

将 var YOURMAP 指向地图以及纬度和经度，它将以该点为中心并根据需要调整大小。

with jquery and google API V-3 you can use

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

point the var YOURMAP to the map and the lat and lng an it will center on the point and resize if needed.

回复收藏 0 原文

梦里兽 2024-11-26 15:35:40

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

yourMap.panTo( yourMarker.getPosition() );

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

yourMap.panTo( yourMarker.getPosition() );

回复收藏 0 原文

南汐寒笙箫 2024-11-26 15:35:40

您需要执行以下操作：

<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' />

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

API V3 的 Google 地图事件

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

Youd need to do something like this:

<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>

And make sure you change the id of your image to match the selector.

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

Make sure you replace map with the name of your created map.
Replace marker with the name of your created marker.
And if using the first example, replace lat/lng with the correct positions.

Google Maps Events for API V3

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

回复收藏 0 原文

~没有更多了~