0

所以我正在开发一个自定义的谷歌地图旅游类型应用程序，我想知道当我点击谷歌地图标记中的链接时如何让媒体弹出。理想情况下，这就是我希望发生的事情： 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() 方法中很可能需要一些东西，我只是不确定是什么。

4

1 回答 1

0

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

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

于 2012-11-22T01:05:04.157 回答