Question

我已经制作了一些代码，可以通过下拉菜单在谷歌地图上绘制基本标记。

然而：我想要有两个下拉菜单，其中包含相同的选项，并且只显示在下拉菜单中选择的标记（即有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>

谷歌地图两个下拉菜单在地图上生成两个标记

0 个答案: