Маркер Перетаскивание Событие Google Карты

У меня есть карты Google и маркер, определяющий мою позицию, это перетаскиваемый маркер с информационным окном.

Вот мой код

 var marker;
 var infowindowPhoto;  
 var latPosition;
 var longPosition;
 var newLocationLat;
 var newLocationLong;  

function initializeMarker()
 {

  if(navigator.geolocation) 
  {
    navigator.geolocation.getCurrentPosition(function(position) 
    {
      var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

       latPosition = position.coords.latitude;
       longPosition = position.coords.longitude;

       //alert("Latitude:"+latPosition);
       //alert("Longitude:"+longPosition);

      marker = new google.maps.Marker
      ({
          position: pos,
          draggable:true,
          animation: google.maps.Animation.DROP,
          map: map

      });         
        markersArray.push(marker);

        google.maps.event.addListener(marker, 'click', function (event) 
        {
            infowindowPhoto.open(map,marker); 

            document.getElementById("latbox").value = this.getPosition().lat();
            document.getElementById("lngbox").value = this.getPosition().lng();

            latPosition = this.getPosition().lat();
            longPosition = this.getPosition().lng(); 

        });


        google.maps.event.addListener(marker,'dragend', function (event)
        {
            infowindowPhoto.open(map,marker);  

            document.getElementById("latbox").value = this.getPosition().lat();
            document.getElementById("lngbox").value = this.getPosition().lng();

            newLocationLat = this.getPosition().lat();
            newLocationLong = this.getPosition().lng();                             
        });

        infowindowPhoto.open(map,marker);

         map.setCenter(pos);
    },
    function()
    {
      handleNoGeolocation(true);
    });
  } 
    else 
  {

    handleNoGeolocation(false);
  }

    contentString ='<h1 id="firstHeading" class="firstHeading">Uluru</h1>';

    infowindowPhoto = new google.maps.InfoWindow
   ({
       content: contentString
   });
}   

function Alert() 
{

    alert("Latitude:"+latPosition);
    alert("Longitude:"+longPosition);

    alert("newLatitude:"+newLocationLat);
    alert("newLongitude:"+newLocationLong);

}

Маркер сначала располагается в моем местоположении, если я не перетаскиваю маркер, который он показывает мне в функции предупреждения о моем местоположении. Таким образом, в двух первых предупреждениях в функции aloert он показывает мне мою позицию, а два других предупреждения не определены.

Теперь моя проблема в том, что я хочу, чтобы эта функция работала, когда я не перемещаю маркер.

google.maps.event.addListener(marker, 'click', function (event) 
        {
            infowindowPhoto.open(map,marker); 

            document.getElementById("latbox").value = this.getPosition().lat();
            document.getElementById("lngbox").value = this.getPosition().lng();

            latPosition = this.getPosition().lat();
            longPosition = this.getPosition().lng(); 

        });

Я хочу, чтобы при перетаскивании маркера работала эта функция

        google.maps.event.addListener(marker,'dragend', function (event)
        {
            infowindowPhoto.open(map,marker);  

            document.getElementById("latbox").value = this.getPosition().lat();
            document.getElementById("lngbox").value = this.getPosition().lng();

            newLocationLat = this.getPosition().lat();
            newLocationLong = this.getPosition().lng();                             
        });

Так что я могу показать только свою новую должность. Спасибо за вашу помощь

/////////////////////////////////Обновлять//////////////// /////////////////// У меня есть этот код, который показывает мне новую широту и долготу во вводе html:

<div id="latlong">
<p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
<p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p>


person Katsudoka    schedule 09.10.2014    source источник
comment
Что такое latbox и lngbox?   -  person MrUpsidown    schedule 09.10.2014
comment
Здравствуйте, MrUpsidown. Спасибо за ваш ответ. Не могли бы вы увидеть обновленную часть сообщения выше?   -  person Katsudoka    schedule 09.10.2014


Ответы (1)


Несколько советов:

  1. Избегайте ненужного кода при возникновении проблем со сценарием. Разбейте это на самое главное.
  2. Всегда публикуйте необходимый код вместе со своим вопросом (теперь вы его обновили). Хорошая точка зрения.
  3. Избегайте дублирования кода в разных местах. Создайте для этого функции.

Теперь я понимаю, что вы хотите показать местоположение пользователя в двух входах. Я думал, вы хотите показать это в информационном окне, что я и сделал в приведенном ниже коде (но основная идея та же).

Несколько примечаний:

  1. Код в прослушивателе событий (щелчок, драгенд и т. Д.) Выполняется только при срабатывании события.
  2. Вы можете использовать метод setContent информационного окна, если хотите обновить его содержимое.

Вот код:

var map;
var marker;
var infowindowPhoto = new google.maps.InfoWindow();
var latPosition;
var longPosition;

function initialize() {

    var mapOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(10,10)
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    initializeMarker();
}

function initializeMarker() {

    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(function (position) {

            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            latPosition = position.coords.latitude;
            longPosition = position.coords.longitude;

            marker = new google.maps.Marker({
                position: pos,
                draggable: true,
                animation: google.maps.Animation.DROP,
                map: map
            });

            map.setCenter(pos);
            updatePosition();

            google.maps.event.addListener(marker, 'click', function (event) {
                updatePosition();
            });

            google.maps.event.addListener(marker, 'dragend', function (event) {
                updatePosition();
            });
        });
    }
}

function updatePosition() {

    latPosition = marker.getPosition().lat();
    longPosition = marker.getPosition().lng();

    contentString = '<div id="iwContent">Lat: <span id="latbox">' + latPosition + '</span><br />Lng: <span id="lngbox">' + longPosition + '</span></div>';

    infowindowPhoto.setContent(contentString);
    infowindowPhoto.open(map, marker);
}

initialize();

Вот демонстрация:

демонстрация JSFiddle

Надеюсь это поможет! Если у вас есть вопросы, не стесняйтесь их задавать!

person MrUpsidown    schedule 09.10.2014
comment
На самом деле большое спасибо за вашу помощь. Могу ли я задать вопрос, могу ли я предупредить значения широты и долготы в другой функции, если, например, мне нужно отправить эти значения на сервер? Он не может показать мне undefined, если я просто предупреждаю широту и долготу в другой функции? Еще раз большое спасибо :) - person Katsudoka; 09.10.2014
comment
Конечно, просто вызовите его из функции updatePosition(): jsfiddle.net/upsidown/d3toa81m/3 - person MrUpsidown; 09.10.2014