Google Maps API 上的标记未与 Geolocation 一起显示答案

【问题标题】：Markers on Google Maps API are not showing up with GeolocationGoogle Maps API 上的标记未与 Geolocation 一起显示
【发布时间】：2015-01-16 21:17:24
【问题描述】：

我正在尝试根据用户的地理位置在地图上显示地点。我知道地理位置有效并且地图显示出来了，但是没有一个标记显示本地企业。我在控制台中也没有收到任何错误。我确保我的 html 中的脚本同时传递了库和 API 密钥，但以防万一，这里是脚本：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_KEY"></script>

这是我的 JavaScript...

var map;
var infowindow;
var service;

function initialize() {

    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 13,
        mapTypeControl: false,
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: true,
        streetViewControl: false
    });

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

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

            var request = {
                location: pos,
                radius: 500,
                types: ['store']
            };

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

            map.setCenter(pos);

        }, function() {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }
}

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

// Create Marker for Places
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.name);
        infowindow.open(map, this);
    });
}

// Google Maps Error Flags

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(60, 105),
    content: content
  };

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

【问题讨论】：

可能您所在位置周围 500 米范围内没有列出的商店（对我来说，您的代码有效）
我将半径增加到 32186.9（20 英里），但仍然无法正常工作。我还添加了更多类型... types: ['dentist|store|restaurant'] 关于可能导致这种情况的任何想法？我很确定我的代码也是正确的。
您会看到内容为“找到您！”的信息窗口？（顺便说一句：类型不正确，必须是['dentist','store','restaurant']）
好的，我修好了。我看到了他们 |文件上的分隔符。我确实看到了“找到你！”弹出窗口。但是附近地方的标记没有出现。
navigator.getCurrentPosition返回的位置是什么？

标签： javascript google-maps google-maps-api-3 google-maps-markers google-places

【解决方案1】：

这是我开始工作的更新代码。我对标记进行了一些自定义，但现在可以使用。正如 cmets 中提到的，我认为这个问题与为 infowindow 设置的变量有关。我将地理位置更改为“infowindowLocation”，并在错误标志部分进行了调整。

var map;
var infowindow;
var service;

function initialize() {

    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 13,
        mapTypeControl: false,
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: true,
        streetViewControl: false
    });

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

            var infowindowLocation = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Found You!'
            });

            var request = {
                location: pos,
                radius: 3218.69,
                types: ['dentist']
            };

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

            map.setCenter(pos);

        }, function() {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }
}

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

// Create Marker for Places
function createMarker(place) {
    var placeLoc = place.geometry.location;
    var image = 'img/flag.png';
    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        title: place.name,
        animation: google.maps.Animation.DROP,
        icon: image
    });

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

// Google Maps Error Flags

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(60, 105),
    content: content
  };

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

initialize();

【讨论】：