Google Javascript Api 标记不可见答案

【问题标题】：Google Javascript Api Markers not visibleGoogle Javascript Api 标记不可见
【发布时间】：2023-03-28 10:21:01
【问题描述】：

我想显示标记以及我当前的位置。在下面的代码中，位置从默认位置更改为当前位置，但标记不可见。商店被正确检索。我想将标记与我当前的位置一起显示。

    function initMap() {

    //Set default location of google maps for demonstration purposes
    var map = new google.maps.Map(document.getElementById('map'), {
        center :  {lat: 18.533333, lng: 73.866667},
        zoom: 10
    });

    //create global variables/objects 
    var pos = {};
    var strLoc = {};
    var infoWindow = new google.maps.InfoWindow({map: map});
    var request = {};

    if(navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(function(position){

            //Get current location to set the center of the google maps
            var pos = { 
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };

            //get your current location for finding places around you.
            //This should be a latlng object of google maps api.
            strLoc = new google.maps.LatLng(pos);


            //create a google maps request object
            request = {
                location: strLoc,
                radius: 500,
                types:['store']
            }


            //set current location on google maps based on HTML geolocation
            infoWindow.setPosition(pos);
            infoWindow.setContent('You are Here');
            map.setCenter(pos);


            alert(request)
            var placeservice = new google.maps.places.PlacesService(map)
            placeservice.nearbySearch(request,callback)

        });


    }

}

function callback(places, status)
{

    if(status === google.maps.places.PlacesServiceStatus.OK)
    {

        for(var i = 0; i<places.length; i++)
        {
            alert(places[i].name)
            createMarkers(places[i]);
        }
    }
}

function createMarkers(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);  
    })
}

【问题讨论】：

为什么说店铺检索正确？您为什么希望它们出现在地图上？
我在回调函数中放了一个 alert(stores[i].name) 来显示商店的名字。
请提供一个minimal reproducible example 来证明该问题。我没有看到那些（如果他们工作的话会很烦人）警报。我确实看到了 javascript 错误：Uncaught ReferenceError: storeRequest is not defined、InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama 和 Uncaught ReferenceError: infoWindow is not defined
我编辑了包含一些不正确变量的代码。我已经在回调函数的for循环中添加了警报。
重复How to show markers on map?

标签： google-maps google-maps-markers

【解决方案1】：

我现在收到一个 javascript 错误：InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama 在这一行：

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

因为此时代码中的 map 是对 id="map" 的 <div> 的引用，而不是 initMap 函数本地的 google.maps.Map 对象。解决问题的一种方法是使其成为全球性问题。

var map; // global variable, outside of any function declarations
function initMap() {
  //default location
  // initialize global map variable.
  map = new google.maps.Map(document.getElementById('map'), {
    center :  {lat: -25.363, lng: 131.044},
    zoom: 10
  });
// ...

proof of concept fiddle

代码 sn-p：

var map;

function initMap() {
  //Set default location of google maps for demonstration purposes
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 18.533333,
      lng: 73.866667
    },
    zoom: 10
  });

  //create global variables/objects 
  var pos = {};
  var strLoc = {};
  var infoWindow = new google.maps.InfoWindow({
    map: map
  });
  var request = {};

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {

      //Get current location to set the center of the google maps
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      //get your current location for finding places around you.
      //This should be a latlng object of google maps api.
      strLoc = new google.maps.LatLng(pos);


      //create a google maps request object
      request = {
        location: strLoc,
        radius: 500,
        types: ['store']
      }


      //set current location on google maps based on HTML geolocation
      infoWindow.setPosition(pos);
      infoWindow.setContent('You are Here');
      map.setCenter(pos);


      // alert(request)
      var placeservice = new google.maps.places.PlacesService(map)
      placeservice.nearbySearch(request, callback)

    });


  }

}

function callback(places, status) {

  if (status === google.maps.places.PlacesServiceStatus.OK) {

    for (var i = 0; i < places.length; i++) {
      // alert(places[i].name)
      createMarkers(places[i]);
    }
  }
}

function createMarkers(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.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

【讨论】：