Question

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

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

Answer 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中的那一点是对<div> id =“map”的引用，而不是google.maps.Map对象，它是initMap函数的本地对象。解决问题的一个方法是使其成为全球性的。

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

代码段

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"></script>
<div id="map"></div>

谷歌Javascript Api标记不可见

1 个答案: