javascript - Uncaught ReferenceError: pos が定義されていません

Question

js:

var map;

function initialize() {
  $('#refreshmap').on('click',initialize);
  var mapOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


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

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

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(-29.3456, 151.4346),
    content: content
  };
  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

var marker = new google.maps.Marker({
    position: pos,
    title: 'Position',
    map: map,
    draggable: true,
    visible:true
  });

 updateMarkerPosition(pos);
  geocodePosition(pos); 
   google.maps.event.addListener(marker, 'drag', function() {

    updateMarkerPosition(marker.getPosition());
  });
  $('#button').click(function(){
    marker.setVisible(true);  
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

html:

<div id="map-canvas"></div> 
<button  type="button" id="button" class="map_buttons button_style">Add marker</button>

上記のコードは、ボタンをクリックして現在の場所にマーカーを表示するためのものです。マップは現在の場所を表示していますが、マーカーは機能していません。

コンソールに「Uncaught ReferenceError: pos is not defined」というエラーが表示されます。

Answer 1

Try this:

var map;
var pos;
function initialize() {
    $('#refreshmap').on('click', initialize);
    var mapOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


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

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

            map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }

    function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
            var content = 'Error: The Geolocation service failed.';
        } else {
            var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
            map: map,
            position: new google.maps.LatLng(-29.3456, 151.4346),
            content: content
        };
        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
    }

    var marker = new google.maps.Marker({
        position: pos,
        title: 'Position',
        map: map,
        draggable: true,
        visible: true
    });

    updateMarkerPosition(pos);
    geocodePosition(pos);
    google.maps.event.addListener(marker, 'drag', function () {

        updateMarkerPosition(marker.getPosition());
    });
    $('#button').click(function () {
        marker.setVisible(true);
    });

}

Basically, declare var pos in the global scope, and remove var while initializing pos

The issue is that

During creation of the marker object, pos is undefined in the scope

Answer 2

マップのように、pos グローバルを宣言してみてください

 var map;
 var pos;