使用地理定位单击按钮时正在加载 Google 地图标记

Loading Google maps marker on button click using geolocation

我的代码应该定义用户的地理位置并为其分配值 pos。然后我想使用 pos 的这个值在单击按钮时创建一个标记。

但是，我没有得到一个要点。 position 和 map 都是已经赋值的全局变量，所以不知道为什么没有得到响应。

如有任何帮助，我们将不胜感激！

Javascript:

var map;
var service;
var marker;
var pos;
var infowindow;
var marker2;

function initialize() {

    var mapOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: true,
        panControl: true,
        streetViewControl: true,
        mapTypeControl: true,
    };

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

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

            infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'You Are Here'
            });

            var request = {
                location: pos,
                radius: 1000,
                types: ['doctor']
            };

            map.setCenter(pos);

            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);

        },

        function () {
            handleNoGeolocation(true);
        });
    } else {
        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(51.5334410,-0.1396180),
    content: content
    };

    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);

    pos = options.position;

var request = {
    location: pos,
    radius: 1000,
    types: ['hospital']
  };

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }
        }
    }

    function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(place.vicinity);
            infowindow.open(map, this);
        });

    }

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

document.getElementById("button").addEventListener("click", function(){
        marker2 = new google.maps.Marker({
        position : pos,
        map: map
      })
    });

HTML: 

<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <meta name="keywords" content="TBC" />
    <meta name="description" content="TBC" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name=viewport content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/main.css">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="assets/js/jquery-2.1.1.min.js"></script>
    <script src="assets/js/main.js"></script>
</head>

<body>
    <div id="header">
        <img src="https://www.bhf.org.uk/~/media/images/admin/logo/bhf-logo.png"  width="40" />
        <h1><strong>British Heart Foundation:</strong>
        <br />Defibrillator Locator</h1>
        <div class="clearfix">&nbsp;</div>
    </div>
    <div id="map-canvas"></div>
    <div id="firstResult" class="results"> <button id="button"> Register </button> </div>
    <div class="results"> Test </div>
    <div class="results"><a class="address" href= "C:\Users\jacholt\Documents\Analytics\BHF - 11.05- Page 2\index.html"> Report a Defibrillator </a> </div>
    <div class="instruct"> <a class="address" href="https://www.bhf.org.uk/heart-health/nation-of-lifesavers/using-defibrillators"> How to use a defibrillator</a> </div>
</body>

</html>

在 初始化函数中添加 "click" 侦听器函数 。它在 onload 事件触发并且 DOM 已呈现时运行。在此之前，无法在 DOM.

中找到该按钮

代码片段：

var map;
var service;
var marker;
var pos;
var infowindow;
var marker2;

function initialize() {

    var mapOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: true,
        panControl: true,
        streetViewControl: true,
        mapTypeControl: true,
    };

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

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

            infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'You Are Here'
            });

            var request = {
                location: pos,
                radius: 1000,
                types: ['doctor']
            };

            map.setCenter(pos);

            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);

        },

        function () {
            handleNoGeolocation(true);
        });
    } else {
        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(51.5334410,-0.1396180),
    content: content
    };

    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);

    pos = options.position;

var request = {
    location: pos,
    radius: 1000,
    types: ['hospital']
  };

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }
        }
    }

    function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(place.vicinity);
            infowindow.open(map, this);
        });

    }
document.getElementById("button").addEventListener("click", function(){
        marker2 = new google.maps.Marker({
        position : pos,
        map: map
      })
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<div id="header">
        <img src="https://www.bhf.org.uk/~/media/images/admin/logo/bhf-logo.png"  width="40" />
        <h1><strong>British Heart Foundation:</strong>
        <br />Defibrillator Locator</h1>
        <div class="clearfix">&nbsp;</div>
    </div>
    <div id="map-canvas"></div>
    <div id="firstResult" class="results"> <button id="button"> Register </button> </div>
    <div class="results"> Test </div>
    <div class="results"><a class="address" href= "C:\Users\jacholt\Documents\Analytics\BHF - 11.05- Page 2\index.html"> Report a Defibrillator </a> </div>
    <div class="instruct"> <a class="address" href="https://www.bhf.org.uk/heart-health/nation-of-lifesavers/using-defibrillators"> How to use a defibrillator</a> </div>