谷歌地图标记作为链接api v3 [英] google maps marker as link api v3

查看：121
本文介绍了谷歌地图标记作为链接api v3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何添加指向标记的链接以打开新页面，其中target =_ self，我发现了一些示例，但我不知道如何在代码中使用它，确实帮助我

 < script type =text / javascript> 
 
 var mapa; // obiekt globalny 
 
函数dodajMarker（opcjeMarkera）
 {
 opcjeMarkera.map = mapa; 
 var marker = new google.maps.Marker（opcjeMarkera）; 
 
 
函数mapaStart（）
 {
 var wspolrzedne = new google.maps.LatLng（58.699776,16.984863）; 
 var opcjeMapy = {
 zoom：6，
 center：wspolrzedne，
 mapTypeId：google.maps.MapTypeId.TERRAIN，
 disableDefaultUI：true，
 navigationControl：true，// kontrolka nawigacji 
 navigationControlOptions：
 {
 style：google.maps.NavigationControlStyle.SMALL 
} 
}; 
 mapa = new google.maps.Map（document.getElementById（mapka），opcjeMapy）; 
 
 //wspólnecechy ikon 
 var rozmiar = new google.maps.Size（32,32）; 
 var rozmiar_cien = new google.maps.Size（59,32）; 
 var punkt_startowy = new google.maps.Point（0,0）; 
 var punkt_zaczepienia = new google.maps.Point（16,16）; 
 
 // ikonki 
 var ikona1 = new google.maps.MarkerImage（markers / marker1.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 var ikona2 = new google.maps.MarkerImage（markers / marker2.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 var ikona3 = new google.maps.MarkerImage（markers / marker3.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 var ikona4 = new google.maps.MarkerImage（markers / marker4.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 var ikona5 = new google.maps.MarkerImage（markers / marker5.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 var ikona6 = new google.maps.MarkerImage（markers / marker6.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 
 
 var cien1 =新google.maps.MarkerImage（http://www.google.com/intl/zh-TW/mapfiles/shadow50.png，rozmiar_cien，punkt_startowy，punkt_zaczepienia） ; 
 
 dodajMarker（{position：new google.maps.LatLng（58.203148,16.601637），icon：ikona1，shadow：cien1}）; 
 dodajMarker（{position：new google.maps.LatLng（58.3902,16.7202），icon：ikona2，shadow：cien1}）; 
 dodajMarker（{position：new google.maps.LatLng（58.566667,15.166667），icon：ikona3，shadow：cien1}）; 
 dodajMarker（{position：new google.maps.LatLng（58.488553,16.928773），icon：ikona4，shadow：cien1}）; 
 dodajMarker（{position：new google.maps.LatLng（57.899804,16.408064），icon：ikona5，shadow：cien1}）; 
 dodajMarker（{position：new google.maps.LatLng（57.951087,16.55972），icon：ikona6，shadow：cien1}）; 
} 
 
 
 
< / script>

第一个标记应该看起来像这样吗？在哪里放网址？
$ b $ pre $ 函数dodajMarker（{position：new google.maps.LatLng（58.203148,16.601637），icon： ikona1，shadow：cien1}）
{
opcjeMarkera.map = mapa;
var marker = new google.maps.Marker（{position：new google.maps.LatLng（58.203148,16.601637），icon：ikona1，shadow：cien1}）;
google.maps.event.addListener（marker，'click'，function（）{
window.location.href = marker.url;
}）;




$ b $ p
$ b

这是我的代码，它的功能很强大

 < script type =text / javascript> 
 <！ -  
 var mapa; // obiekt globalny 
 
函数dodajMarker（opcjeMarkera）
 {
 opcjeMarkera.map = mapa; 
 var marker = new google.maps.Marker（opcjeMarkera）; 
 
 
函数mapaStart（）
 {
 var wspolrzedne = new google.maps.LatLng（58.699776,16.984863）; 
 var opcjeMapy = {
 zoom：6，
 center：wspolrzedne，
 mapTypeId：google.maps.MapTypeId.TERRAIN，
 disableDefaultUI：true，
 navigationControl：true，// kontrolka nawigacji 
 navigationControlOptions：
 {
 style：google.maps.NavigationControlStyle.SMALL 
} 
}; 
 mapa = new google.maps.Map（document.getElementById（mapka），opcjeMapy）; 
 
 //wspólnecechy ikon 
 var rozmiar = new google.maps.Size（32,32）; 
 var rozmiar_cien = new google.maps.Size（59,32）; 
 var punkt_startowy = new google.maps.Point（0,0）; 
 var punkt_zaczepienia = new google.maps.Point（16,16）; 
 
 // ikonki 
 var ikona1 = new google.maps.MarkerImage（markers / marker1.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 var ikona2 = new google.maps.MarkerImage（markers / marker2.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 var ikona3 = new google.maps.MarkerImage（markers / marker3.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 var ikona4 = new google.maps.MarkerImage（markers / marker4.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 var ikona5 = new google.maps.MarkerImage（markers / marker5.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 var ikona6 = new google.maps.MarkerImage（markers / marker6.png，rozmiar，punkt_startowy，punkt_zaczepienia）; 
 
 
 var cien1 =新google.maps.MarkerImage（http://www.google.com/intl/zh-TW/mapfiles/shadow50.png，rozmiar_cien，punkt_startowy，punkt_zaczepienia） ; 
 
 dodajMarker（{position：new google.maps.LatLng（58.203148,16.601637），icon：ikona1，shadow：cien1，url：'http：//www.google.com'}）; 
 dodajMarker（{position：new google.maps.LatLng（58.3902,16.7202），icon：ikona2，shadow：cien1，url：'http：//www.google.com'}）; 
 dodajMarker（{position：new google.maps.LatLng（58.566667,15.166667），icon：ikona3，shadow：cien1，url：'http：//www.google.com'}）; 
 dodajMarker（{position：new google.maps.LatLng（58.488553,16.928773），icon：ikona4，shadow：cien1，url：'http：//www.google.com'}）; 
 dodajMarker（{position：new google.maps.LatLng（57.899804,16.408064），icon：ikona5，shadow：cien1，url：'http：//www.google.com'}）; 
 dodajMarker（{position：new google.maps.LatLng（57.951087,16.55972），icon：ikona6，shadow：cien1，url：'http：//www.google.com'}）; 
} 
  - > 
< / script>


解决方案

您可以这样做。

  var marker = new google.maps.Marker（{
 url：'http://www.google.com/'， 
 map：map 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 window.location.href = marker.url; 
}）;

未经测试的代码...只需大声思考！

$ p
$ b 

 函数dodajMarker（opcjeMarkera）
 {
 opcjeMarkera.map = mapa; 
 var marker = new google.maps.Marker（opcjeMarkera）; 
 google.maps.event.addListener（marker，'click'，function（）{
 window.location.href = marker.url; 
}）;

主要要注意的是 marker 在addListener函数中再次引用变量。 

  dodajMarker（{position：new google.maps.LatLng（57.951087， 16.55972），图标：ikona6，shadow：cien1，url：'http：//www.google.com'}）;


how to add links to the markers to open new pages with target="_self", i found some examples but i dont know how to use it in my code, do help me pls

<script type="text/javascript">   

            var mapa; // obiekt globalny

            function dodajMarker(opcjeMarkera)
            {
                opcjeMarkera.map = mapa;
                var marker = new google.maps.Marker(opcjeMarkera);
            }

            function mapaStart()  
            {  
                var wspolrzedne = new google.maps.LatLng(58.699776,16.984863);
                var opcjeMapy = {
                    zoom: 6,
                    center: wspolrzedne,
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    disableDefaultUI: true,
                    navigationControl: true, // kontrolka nawigacji
    navigationControlOptions:
    {
        style: google.maps.NavigationControlStyle.SMALL 
    }
                };
                mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);

                // wspólne cechy ikon
                var rozmiar = new google.maps.Size(32,32);
                var rozmiar_cien = new google.maps.Size(59,32);
                var punkt_startowy = new google.maps.Point(0,0);
                var punkt_zaczepienia = new google.maps.Point(16,16);

                // ikonki
                var ikona1 = new google.maps.MarkerImage("markers/marker1.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona2 = new google.maps.MarkerImage("markers/marker2.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona3 = new google.maps.MarkerImage("markers/marker3.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona4 = new google.maps.MarkerImage("markers/marker4.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona5 = new google.maps.MarkerImage("markers/marker5.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona6 = new google.maps.MarkerImage("markers/marker6.png", rozmiar, punkt_startowy, punkt_zaczepienia);


                var cien1 = new google.maps.MarkerImage("http://www.google.com/intl/en_ALL/mapfiles/shadow50.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);

                dodajMarker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona1, shadow: cien1});
                dodajMarker({position: new google.maps.LatLng(58.3902,16.7202),  icon: ikona2, shadow: cien1});
                dodajMarker({position: new google.maps.LatLng(58.566667,15.166667),  icon: ikona3, shadow: cien1});
                dodajMarker({position: new google.maps.LatLng(58.488553,16.928773), icon: ikona4, shadow: cien1 });
                dodajMarker({position: new google.maps.LatLng(57.899804,16.408064),  icon: ikona5, shadow: cien1});
                dodajMarker({position: new google.maps.LatLng(57.951087,16.55972),  icon: ikona6, shadow: cien1});
                }



        </script>

does the first marker should look like this ?? where to put url ??

function dodajMarker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona1, shadow: cien1})
                {
                    opcjeMarkera.map = mapa;
                    var marker = new google.maps.Marker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona1, shadow: cien1});
                    google.maps.event.addListener(marker, 'click', function() {
                        window.location.href = marker.url;
                    });

                }

this is my code and it dosent work

<script type="text/javascript">   
        <!-- 
            var mapa; // obiekt globalny

            function dodajMarker(opcjeMarkera)
            {
                opcjeMarkera.map = mapa;
                var marker = new google.maps.Marker(opcjeMarkera);
            }

            function mapaStart()  
            {  
                var wspolrzedne = new google.maps.LatLng(58.699776,16.984863);
                var opcjeMapy = {
                    zoom: 6,
                    center: wspolrzedne,
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    disableDefaultUI: true,
                    navigationControl: true, // kontrolka nawigacji
    navigationControlOptions:
    {
        style: google.maps.NavigationControlStyle.SMALL 
    }
                };
                mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);

                // wspólne cechy ikon
                var rozmiar = new google.maps.Size(32,32);
                var rozmiar_cien = new google.maps.Size(59,32);
                var punkt_startowy = new google.maps.Point(0,0);
                var punkt_zaczepienia = new google.maps.Point(16,16);

                // ikonki
                var ikona1 = new google.maps.MarkerImage("markers/marker1.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona2 = new google.maps.MarkerImage("markers/marker2.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona3 = new google.maps.MarkerImage("markers/marker3.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona4 = new google.maps.MarkerImage("markers/marker4.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona5 = new google.maps.MarkerImage("markers/marker5.png", rozmiar, punkt_startowy, punkt_zaczepienia);
                var ikona6 = new google.maps.MarkerImage("markers/marker6.png", rozmiar, punkt_startowy, punkt_zaczepienia);


                var cien1 = new google.maps.MarkerImage("http://www.google.com/intl/en_ALL/mapfiles/shadow50.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);

                dodajMarker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona1, shadow: cien1, url:'http://www.google.com'});
                dodajMarker({position: new google.maps.LatLng(58.3902,16.7202),  icon: ikona2, shadow: cien1, url:'http://www.google.com'});
                dodajMarker({position: new google.maps.LatLng(58.566667,15.166667),  icon: ikona3, shadow: cien1, url:'http://www.google.com'});
                dodajMarker({position: new google.maps.LatLng(58.488553,16.928773), icon: ikona4, shadow: cien1, url:'http://www.google.com' });
                dodajMarker({position: new google.maps.LatLng(57.899804,16.408064),  icon: ikona5, shadow: cien1, url:'http://www.google.com'});
                dodajMarker({position: new google.maps.LatLng(57.951087,16.55972),  icon: ikona6, shadow: cien1, url:'http://www.google.com'});
                }
        -->
        </script>

解决方案

You could do something like this.

var marker = new google.maps.Marker({
  url: 'http://www.google.com/',
  map: map
});

google.maps.event.addListener(marker, 'click', function() {
  window.location.href = marker.url;
});

Code untested... just thinking out loud!

To fit it in with your existing code...

        function dodajMarker(opcjeMarkera)
        {
            opcjeMarkera.map = mapa;
            var marker = new google.maps.Marker(opcjeMarkera);
            google.maps.event.addListener(marker, 'click', function() {
                window.location.href = marker.url;
            });

        }

The main thing to note is the marker variable is referenced again in the addListener function.

dodajMarker({position: new google.maps.LatLng(57.951087,16.55972),  icon: ikona6, shadow: cien1, url:'http://www.google.com'});

这篇关于谷歌地图标记作为链接api v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆