Question

因此，我正在开发自定义Google地图导览类型应用程序，并且我想知道当我点击谷歌地图标记内的链接时如何让媒体弹出。理想情况下，这就是我想要发生的事情： 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（）方法中使用一些东西，我只是不确定是什么。

Answer 1

您将要使用InfoWindow并从click事件处理程序中调用其open（）方法。

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

中的部分

从谷歌地图自定义标记打开媒体

1 个答案: