Question

如果用户将鼠标悬停在地图上的特定城市上，则我尝试播放声音，该城市以红色圆圈突出显示，并且我正在使用以下代码，并且每个城市都应该有声音，例如，如果用户要播放音频1将鼠标悬停在地图上的芝加哥市

<!DOCTYPE html>

<html> <head>

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>

  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>


 </head>


  <body>

<div id="map"></div><script>
var audio2 = document.createElement('audio')audio2.src = 'sound.mp3' ;
var audio1 = document.createElement('audio');
audio1.src = 'sound.mp3';

// This example creates circles on the map, representing populations in North
  // America.
  // First, create an object containing LatLng and population for each city.
  var citymap = {
    chicago: {
      center: {lat: 41.878, lng: -87.629},
      population: 2714856
    },
    newyork: {
      center: {lat: 40.714, lng: -74.005},
      population: 8405837
    },
    losangeles: {
      center: {lat: 34.052, lng: -118.243},
      population: 3857799
    },
    vancouver: {

 center: {lat: 49.25, lng: -123.1},


 population: 603502




    }

  };

  function initMap() {
    // Create the map.
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: 37.090, lng: -95.712},
      mapTypeId: 'terrain'
    });

    // Construct the circle for each value in citymap.
    // Note: We scale the area of the circle based on the population.
    for (var city in citymap) {
      // Add the circle for this city to the map.
      var cityCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: citymap[city].center,
        radius: Math.sqrt(citymap[city].population) * 100
      });
    }
  }



}   


</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=+++++MYKODE+++++&callback=initMap">
</script>
  </body>
</html>

鼠标悬停在Google地图中的声音

0 个答案: