1

我编写了一些代码来在可通过下拉列表选择的谷歌地图上绘制基本标记。

但是：我希望有两个带有相同选项的下拉菜单，并且只显示在下拉菜单中选择的标记（即有 100 多个标记，但只显示 2 个）。我还想在两点之间“画一条线”，并在将鼠标悬停在该位置上时有一个弹出窗口（根据谷歌地图）。最后，窗口可以根据标记调整大小吗？

这是我到目前为止所得到的：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
// Here you can specify all list of your geolocation options
                window.markers = {
                               'Moscow': {lat: 55.74257, lng: 37.61547}, 
                               'Saint Petersburg': {lat: 59.93952, lng: 30.31202}
                };

// This is a initialization of map and set of all markers
  function initialize() {
    var latlng = new google.maps.LatLng(window.markers['Moscow'].lat, window.markers['Moscow'].lng);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                for(i in window.markers){
                               var marker = new google.maps.Marker({  
                                 position: new google.maps.LatLng(window.markers[i].lat, window.markers[i].lng),
                                 map: map  
                               });                           
                }
  }

// This is a handler for dropdown change
  function mychange(element){
                var city = new google.maps.LatLng(window.markers[element.value].lat, window.markers[element.value].lng);
                map.setCenter(city);
                return false;
  }
</script>
</head>
<body onload="initialize()">

// This is your dropdown
  <select onchange='mychange(this)'>
                <option value='Moscow'>Moscow
                <option value='Saint Petersburg'>Saint Petersburg
  </select>

// This DIV for you map
  <div id="map_canvas" style="width:100%; height:100%"></div>

</body>
</html>
4

0 回答 0