【问题标题】:Opening media from google maps custom marker从谷歌地图自定义标记打开媒体
【发布时间】:2012-11-21 23:36:23
【问题描述】:

所以我正在开发一个自定义谷歌地图旅游类型的应用程序,我想知道当我点击谷歌地图标记内的链接时如何让媒体弹出。理想情况下,这就是我想要发生的事情: 1.用户点击标记,正常的白框出现,就像在真正的谷歌地图上一样。 2. 在那个文本框中,我想要一个按钮来启动我存储在某个 SQL 服务器上的媒体。该媒体可以是音频、图片或视频。

我到目前为止的代码如下。如果有人可以让我知道如何做到这一点,或者指出我正确的方向,那就太棒了!

谢谢

<!doctype  html>

<html>
<head>
    <title>HuskyWalk Application Demo</title>
    <meta name="viewport" conmtent="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
        <style>
            html, body, #mapcanvas {
                margin: 0;
                padding: 0;
                height: 98%;
                }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
         <script>
  var map;
  var iteCoords = new google.maps.LatLng(41.806501, -72.252769);
  //var mapCoords = new google.maps.LatLng(navigator.getCurrentPosition().coords.latitude, navigator.getCurrentPosition().coords.longitude);
  //var mapCoords = new navigator.getCurrentPosition().coords;

  function initialize() {
    //var position = new navigator.geolocation.getCurrentLocation(showPosition);
    var mapOptions = {
      zoom: 18,
      center: iteCoords,
      mapTypeId: google.maps.MapTypeId.HYBRID
        };
    map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
    google.maps.event.addListenerOnce(map, "bounds_changed", watchStart);
    var marker = createMarker();  //creates marker
    }

    function watchStart() {
        if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
        } else {
        alert("Geolocation is not supported by this browser.");
        }
    }

    function createMarker() {
        var marker = new google.maps.Marker({
            position: iteCoords,
            map: map,
            title: 'ITEB',
            });         
        google.maps.event.addListener(marker, "click", onMarker_clicked);
        return marker;
    }

    function onMarker_clicked() {
        alert(this.get('id'));
        }

</script>
</head>
<body onload="initialize()">
    <div id="mapcanvas"></div>
    <div>
        <p>Maps provided by Google Maps</p>
        </div>
    </body>
</html>

我知道在 onMarker_Clicked() 方法中很可能需要一些东西,我只是不确定是什么。

【问题讨论】:

  • 这是我想在用户单击标记时弹出的那种框。然后在其中应该有一个链接来启动媒体。 i.imgur.com/8hFMs.png

标签: javascript android google-maps google-maps-markers


【解决方案1】:

您需要使用 InfoWindow 并从 click 事件处理程序中调用其 open() 方法。

另请参阅谷歌地图开发者指南https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows中的部分

【讨论】:

    猜你喜欢
    • 2013-08-21
    • 1970-01-01
    • 2015-10-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多