代码之家  ›  专栏  ›  技术社区  ›  Blosom

如何在谷歌地图上添加两个位置的标记?

  •  0
  • Blosom  · 技术社区  · 6 年前

    我想在谷歌地图上添加两个位置的标记,可以点击。当我点击按钮时,它应该会随着位置改变地图标记。

     <script>
        var map;
        function initialize()
        {
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position
                zoom: 14,
    
            });
            var marker = new google.maps.Marker({
                position: newLocation(),
                map: map,
                title: 'AGM-CORP',
                icon: 'img/agm-marker.png'
            });
        }
    
        function newLocation(newLat, newLng)
        {
            map.setCenter({
                lat: newLat,
                lng: newLng
            });
        }
    
        google.maps.event.addDomListener(window, 'load', initialize);
        $(document).ready(function ()
        {
            $("#1").on('click', function ()
            {
                newLocation(52.302516, 16.414546);
            });
    
            $("#2").on('click', function ()
            {
                newLocation(51.706478, 15.274753);
            });
        });
    </script>
    <div id="map-canvas"></div>
    </div>
        <h3>Zobacz lokalizację:</h3>
        <button id="1" style="padding:10px; cursor:pointer;">Siedziba Firmy</button>
        <button id="2" style="padding:10px;cursor:pointer;">Kopalnia Kruszyw</button>
    </div>
    
    3 回复  |  直到 6 年前
        1
  •  0
  •   Sunil B N    6 年前
    var map = null
    var marker = null;
    var myLatLng = {
      lat: 52.302516,
      lng: 16.414546
    };
    
    function initMap() {
    
      map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(myLatLng.lat, myLatLng.lng),
        zoom: 14,
      });
    
      marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Hello World!'
      });
    }
    
    function updateMap(lat, lng) {;
      myLatLng.lat = lat;
      myLatLng.lng = lng
      map.setCenter(myLatLng);
      marker.setPosition(myLatLng);
    }
    
    
    $(document).ready(function() {
      $("#1").on('click', function() {
        updateMap(52.302516, 16.414546);
      });
    
      $("#2").on('click', function() {
        updateMap(51.706478, 15.274753);
      });
    });
    

    我正在用新的标记初始化地图。 Working jffiddle is here

        2
  •  0
  •   imixtron    6 年前

    此功能将只切换视图的位置:

    map.setCenter({
       lat: newLat,
       lng: newLng
    });
    

    改用这个:

    new google.maps.LatLng(-25.363882,131.044922);
    

    其次,需要将事件listner添加到marker对象以使其正常工作:

    // create markers on the map
    marker1 = new google.maps.Marker({ ... })
    marker2 = new google.maps.Marker({ ... })
    marker3 = new google.maps.Marker({ ... })
    
    // add event listener
    marker1.addListener('click', function() { ... })
    marker2.addListener('click', function() { ... })
    

    进一步查看 docs 他们相当直截了当。

        3
  •  0
  •   Vignesh Raja    6 年前

    这会奏效的。有一个全局变量来保存 marker . 每当位置改变时,将标记设置在 Lat Lng 使用 setPosition 方法和用途 setCenter 方法在中心显示标记。不需要每次都初始化映射。

    var map,marker;
    function initialize()
    {
        map = new google.maps.Map(document.getElementById('googleMap'), {
            center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position
            zoom: 6,
        });
        setLocation(52.302516,16.414546);
    }
    
    function setLocation(newLat, newLng)
    {
        var latlng = new google.maps.LatLng(newLat,newLng);
        if(marker) //Remove the marker, if already set
        {
            marker.setMap(null);
        }
        marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'AGM-CORP'
        });
        map.setCenter(latlng);
    
    }
    
    $(document).ready(function ()
    {
        $("#1").on('click', function ()
        {
            setLocation(13.070814558816117, 80.2656996835234);
        });
    
        $("#2").on('click', function ()
        {
            setLocation(59.4739316352335,-110.89646088128342);
        });
    });