Ошибка центрирования маркера в зависимости от моего местоположения - PullRequest
Новая
       1

Ошибка центрирования маркера в зависимости от моего местоположения

0 голосов
/ 04 мая 2018

Я пытался центрировать маркер в местоположении пользователя (геолокация), но у меня возникла ошибка этого типа: Uncaught TypeError: Невозможно прочитать свойство 'setPosition' undefined в showPosition . Что я пропустил или делал неправильно? Я надеюсь, что кто-то может мне помочь. Это мой код JavaScript: 

var map;
var infoWindow = new google.maps.InfoWindow();
var x = document.getElementById("geoLocation");
function getLocation() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else {
    x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
        var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('This is your location.');
        infoWindow.open(map);
        map.setCenter(pos);
x.innerHTML = "Latitude: " + (position.coords.latitude).toFixed(6) + 
"<br>Longitude: " + (position.coords.longitude).toFixed(6);
}


  function initMap() {
    var bamako = new google.maps.LatLng(12.6425212, -8.0099928),
    map = new google.maps.Map(document.getElementById("map"), {
      center: bamako,
      zoom: 16
    }),
    marker = new google.maps.Marker({position: bamako, map: map});
    google.maps.event.addListener(map, "mousemove", function (e) {
    var t = e.latLng;
    document.getElementById("mlat").innerHTML = "(" + t.lat().toFixed(6) + ", " + t.lng().toFixed(6) + ")"
    });
    google.maps.event.addListener(map, "click", function (e) {
    marker.setPosition(e.latLng);
    var t = e.latLng, o = "(" + t.lat().toFixed(6) + ", " + t.lng().toFixed(6) + ")";
    document.getElementById("lat").value = t.lat().toFixed(6), document.getElementById("lng").value = t.lng().toFixed(6);
    });
    getLocation();
  }

HTML код: 

<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>MaliBaGuide</title>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 80%;
    width: 70%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
<button class="btn btn-success" onclick="getLocation()">Get My 
Position</button>
<h6>GeoLocation Coordinates</h6>
<div id="geoLocation"></div>
<div id="map"></div>
<div class="col-md-8">
  <label for="lat">Latitude</label>
  <input type="text" name="lat" id="lat" placeholder="lat coordinate" />
  <label for="lng">Longitude</label>
  <input type="text" name="lng" id="lng" placeholder="long coordinate" />
  <h3 class="titleh3">Map Mouse Over Location</h3>
  <span id="mlat" class="coordinatetxt">0,0</span>
</div>
<script src="gmap1.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js? 
key=AIzaSyCXZ1ps6lHbElohymJukUi4KOY6g_rjGQ0&callback=initMap">
</script>
</body>
</html>

1 Ответ

0 голосов
/ 04 мая 2018

Это означает, что вы на самом деле не установили infoWindow как что-либо, вы только что объявили, что оно существует. Интерпретатор JavaScript говорит вам, что вы не можете попытаться получить доступ к свойству для чего-то, что еще не было определено.

Вы можете правильно инициализировать infoWindow, создав его следующим образом: 

var infoWindow = new google.maps.InfoWindow({});

Полный код (с некоторым очищенным форматированием): 

var map;
var infoWindow;
var x = document.getElementById("geoLocation");

function getLocation() {
        if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
        } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
        }
}

function showPosition(position) {
        var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('This is your location.');
        infoWindow.open(map);
        map.setCenter(pos);
        x.innerHTML = "Latitude: " + (position.coords.latitude).toFixed(6) + 
        "<br>Longitude: " + (position.coords.longitude).toFixed(6);
}


function initMap() {
    var bamako = new google.maps.LatLng(12.6425212, -8.0099928),
    infoWindow = new google.maps.InfoWindow({});
    map = new google.maps.Map(document.getElementById("map"), {
                center: bamako,
                zoom: 16
    }),
    marker = new google.maps.Marker({position: bamako, map: map});
    google.maps.event.addListener(map, "mousemove", function (e) {
                var t = e.latLng;
                document.getElementById("mlat").innerHTML = "(" + t.lat().toFixed(6) + ", " + t.lng().toFixed(6) + ")"
    });
    google.maps.event.addListener(map, "click", function (e) {
                marker.setPosition(e.latLng);
                var t = e.latLng, o = "(" + t.lat().toFixed(6) + ", " + t.lng().toFixed(6) + ")";
                document.getElementById("lat").value = t.lat().toFixed(6), document.getElementById("lng").value = t.lng().toFixed(6);
    });
    getLocation();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...