更改地图视图而无需更改位置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了更改地图视图而无需更改位置相关的知识,希望对你有一定的参考价值。

我有一个默认标记(连接用户的地址)和其他标记(数组中传递的地址)的地图,我有一个选择输入,地址在数组中传递,我喜欢当选择选项更改地图的视图更改时选定选项的标记,是否可以在不更改默认标记的默认位置的情况下实现此选项?

答案

对的,这是可能的。当您的选择输入的'更改'事件被触发时,只需使用新的标记变量创建一个新的Google Maps Javascript API Marker

您可以查看下面的示例代码:

      var map;
      function initMap() {
        var defaultLoc = { "lat" : 37.7749295, "lng" :-122.4194155 };
        map = new google.maps.Map(document.getElementById('map'), {
          center: defaultLoc,
          zoom: 8
        });
        var markerDefault = new google.maps.Marker({
          position : defaultLoc,
          map : map
          
        });
        document.getElementById('menuLoc').addEventListener('change', function(){
          var that = this;
          var geocoder = new google.maps.Geocoder();
          geocoder.geocode({          
            address: that.value
          }, function(result, status){
            if ( status === 'OK' ) {
              var newMarker = new google.maps.Marker({
                position : result[0].geometry.location,
                map: map
              });
              map.setCenter(result[0].geometry.location);
            }           
          });
        });
      }
      /* 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;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #FFF;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      } 
    <div id="floating-panel">
      <select id="menuLoc">
      <option value="fresno, ca, USA">Fresno</option>
      <option value="sacramento, ca, usa">Sacramento</option>
      <option value="carson city">Carson City</option>
    </select>
    </div>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap"
    async defer></script>

以上是关于更改地图视图而无需更改位置的主要内容,如果未能解决你的问题,请参考以下文章

片段更改时如何隐藏地图视图(谷歌地图v2)

如何更改谷歌地图标记上方的标题和片段设计

回收网格中的错误。无需随机点击即可更改UI

在片段中在运行时更改方向时更改布局而不重新创建视图

根据viewpager位置更改适配器

以编程方式更改视图方向而无需旋转 ipad