0

だから私はカスタムGoogleマップツアータイプのアプリケーションに取り組んでおり、Googleマップマーカー内のリンクをクリックしたときにメディアをポップアップさせる方法を考えています. 1. ユーザーがマーカーをクリックすると、実際の G​​oogle マップのように通常の白いボックスが表示されます。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 を使用して、クリック イベント ハンドラーからその open() メソッドを呼び出します。

Google マップ開発者ガイドのセクションも参照してください https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

于 2012-11-22T01:05:04.157 に答える