如何在具有两个位置的Google地图上添加标记? [英] How to add marker on google map with two locations?

问题描述

我想在Google地图上添加带有两个可点击位置的标记.当我单击按钮时，应该随位置更改地图标记.

I would like to add markers on google map with two locations, that are clickable. When I click on the button it should change the map marker with the location.

 <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>

推荐答案

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);
  });
});

我正在使用新标记初始化地图. 工作的jffiddle在这里

I am initing the map with new marker. Working jffiddle is here

这篇关于如何在具有两个位置的Google地图上添加标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！