使用地理位置在按钮单击上加载Google Maps标记

Question

My code should define the geolocation of the user and assign it the value pos . 我的代码应定义用户的地理位置并为其分配值pos 。 I then want to use this value of pos to create a marker upon a button click. 然后，我想使用pos值在单击按钮时创建一个标记。

However, I do not get a point being plotted. 但是，我没有得到要点。 Both position and map are global variables that have already been assigned, so can't figure out why I am not getting a response. position和map都是已经分配的全局变量，因此无法弄清楚为什么我没有得到响应。

Any help would be much appreciated! 任何帮助将非常感激！

Javascript: 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: 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>

Answer 1

Add your "click" listener function inside the initialize function. 在初始化函数内添加“单击”侦听器函数。 That runs when the onload event fires and the DOM has been rendered. 该事件在onload事件触发且DOM已呈现时运行。 Before that the button can't be found in the DOM. 在此之前，无法在DOM中找到该按钮。

code snippet: 代码段：

 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>

使用地理位置在按钮单击上加载Google Maps标记

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-05-11 23:15:07

使用地理位置在按钮单击上加载Google Maps标记

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-05-11 23:15:07

解决方案1
0 已采纳 2015-05-11 23:15:07