Google Mapジオロケーションがドラッグまたはクリック中に中央に移動し続ける

ドラッグするとマップが（現在の位置に）センタリングされる理由と混同しています。私は何が起こるかはわかりませんが、ドラッグ/クリックするとgetLocationをループするためです。ここに私のコードはGoogle Mapジオロケーションがドラッグまたはクリック中に中央に移動し続ける

index.htmlを

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Class Project</title> 

    <link href="style.css" rel="stylesheet"> 
</head> 

<body> 
    <script src="script.js"></script> 

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=(MY_API_KEY)"></script> 

    <div id="map" onclick= "initMap()">Get your Location</div> 


</body> 

</html>

script.js

function initMap() {                 //#1 

    navigator.geolocation.getCurrentPosition(getLocation, errorHandler); 
} 

function errorHandler(err) { 
      if(err.code == 1) { 
       alert("Access to your location denied, refresh page."); 
      } 

      else if(err.code == 2) { 
       alert("Error: Position is unavailable!"); 
      } 
     } 

function getLocation(position){ 
     var msg = { 
     info: '<strong>Madison Square Garden</strong><br>\ 
        4 Pennsylvania Plaza<br> New York, NY 10001, USA<br>\ 
        <a href="https://www.google.com.au/maps/place/Madison+Square+Garden/@40.7505045,-73.9934387,15z/data=!4m5!3m4!1s0x0:0x33df10e49762f8e4!8m2!3d40.7505045!4d-73.9934387?sa=X&ved=0ahUKEwjNpdHKyN3TAhVJk5QKHdvOCTEQ_BIIjgEwDA">Get Directions</a>', 
     lat: 40.7505045, 
     long: -73.9934387 
    }; 


    var locations = [ 
     [msg.info, msg.lat, msg.long, 0], 
    ]; 

    var latitude = position.coords.latitude, 
     longitude = position.coords.longitude; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 17, 
     center: new google.maps.LatLng(latitude, longitude), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

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

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
}

出典

2017-05-07 Andrew Stan

ですこれは、マップのレンダリングのdiv内onclick= "initMap()"で起こります。

onclickで地図を読み込むのが問題です。マップをドラッグすると、onclickイベントが発生し、再度マップがロードされます。

マップをロードするにはwindow.onload=initMap()を使用するか、マップをロードするボタンonclickを使用する必要があります。

それはあなたの答えのために

<button onclick= "initMap()"> 
Load Map 
</button> 
<div id="map" >Get your Location</div>

Fiddleデモ

出典

2017-05-07 10:57:46

おかげである必要があり、クリックするとボタンを取り除くすることが可能ですか？ –

はい、ボタンを削除できます。そして、あなたはsrc urlに '＆callback = initMap'があることを見ることができます。ロード時にマップを呼び出すには十分です –

Google Mapジオロケーションがドラッグまたはクリック中に中央に移動し続ける

答えて

関連する問題