Javascript 谷歌地图地理定位在拖动或单击过程中不断向中心移动_Javascript_Jquery_Html_Google Maps_Geolocation

Javascript 谷歌地图地理定位在拖动或单击过程中不断向中心移动

javascript jquery html google-maps geolocation

Javascript 谷歌地图地理定位在拖动或单击过程中不断向中心移动,javascript,jquery,html,google-maps,geolocation,Javascript,Jquery,Html,Google Maps,Geolocation,我不明白为什么拖动时地图会居中（到当前位置）。我不确定会发生什么，但我认为这是因为当我拖动/单击时，它会在我的getLocation中循环。这是我的密码 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"&g

我不明白为什么拖动时地图会居中（到当前位置）。我不确定会发生什么，但我认为这是因为当我拖动/单击时，它会在我的getLocation中循环。这是我的密码

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

函数initMap（）{/#1
navigator.geolocation.getCurrentPosition（getLocation，errorHandler）；
}
函数errorHandler（err）{
如果（err.code==1）{
警报（“拒绝访问您的位置，刷新页面”）；
}
else if（err.code==2）{
警报（“错误：位置不可用！”）；
}
}
函数getLocation（位置）{
var msg={
信息：'麦迪逊广场花园
\
美国纽约州纽约市宾夕法尼亚广场4号，邮编：10001\
',
拉脱维亚：40.7505045，
长：-73.9934387
};
变量位置=[
[msg.info，msg.lat，msg.long，0]，
];
变量纬度=位置坐标纬度，
经度=position.coords.longitude；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：17，
中心：新google.maps.LatLng（纬度、经度），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（{}）；
var标记，i；
对于（i=0；i

发生这种情况是因为map rendering div中的

onclick=“initMap（）”

问题是因为您使用

onclick

加载地图。如果拖动地图，将触发

onclick

事件，并再次加载地图

您应该使用

window.onload=initMap（）

来加载映射，或者使用按钮来加载映射

onclick

，如下所示

应该是

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


负荷图
找到你的位置

演示

感谢您的回答，单击按钮后是否可以删除该按钮？是的，您可以删除该按钮。您可以在脚本src url中看到有

&callback=initMap

。在加载时调用map就足够了