Google Javascript Api标记不可见 [英] Google Javascript Api Markers not visible

问题描述

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

I want to show markers along with my current location. In the below code location changes from default location to current location but the markers are not visible. Stores are retrieved correctly. I want to display the markers along with the my current location.

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

推荐答案

我现在在此行得到一个JavaScript错误:InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama:

I now get one javascript error: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama on this line:

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

因为此时代码map是对id为"map"的<div>的引用，而不是对initMap函数本地的google.maps.Map对象的引用.解决问题的一种方法是将其设置为全局.

Because at that point in your code map is a reference to the <div> with id="map", not the google.maps.Map object, which is local to the initMap function. One option to fix your problem is to make it global.

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

概念提琴证明

代码段:

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>

这篇关于Google Javascript Api标记不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！