Question

我正在尝试根据用户地理位置在地图上显示地点。我知道地理定位工作和地图显示，但没有任何标记出现显示本地业务。我也没有在控制台中出现任何错误。我确保我的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);
}

Answer 1

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

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

Google Maps API上的标记未显示Geolocation

1 个答案: