Question

我想将textSearch添加到我的脚本中但是当我添加它时，地图不会出现，这是我的主脚本：

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
  function writeAddressName(latLng) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      "location": latLng
    },
    function(results, status) {
      if (status == google.maps.GeocoderStatus.OK)
        document.getElementById("address").innerHTML = results[0].formatted_address;
      else
        document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
    });
  }

  function geolocationSuccess(position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    // Write the formatted address
    writeAddressName(userLatLng);

    var myOptions = {

      center : userLatLng,
      zoom : 10,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    // Draw the map
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
    // Place the marker
    new google.maps.Marker({
      map: mapObject,
      position: userLatLng
    });
    // Draw a circle around the user position to have an idea of the current localization accuracy
    var circle = new google.maps.Circle({
      center: userLatLng,
      radius: 800,
      map: mapObject,
      fillColor: '#FFF32F',
      fillOpacity: 0.5,
      strokeColor: '#F1E401',
      strokeOpacity: 1.0
    });
    mapObject.fitBounds(circle.getBounds());
  }

  function geolocationError(positionError) {
    document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
  }

  function geolocateUser() {
    // If the browser supports the Geolocation API
    if (navigator.geolocation)
    {
      var positionOptions = {
        enableHighAccuracy: true,
        timeout: 10 * 1000 // 10 seconds
      };
      navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
    }
    else
      document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
  }

  window.onload = geolocateUser;
</script>

基于this example我将其添加到脚本中：

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

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

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

这是初始化函数：

    var circle = new google.maps.Circle({
          center: userLatLng,
          radius: 800,
          map: mapObject,
          fillColor: '#FFF32F',
          fillOpacity: 0.5,
          strokeColor: '#F1E401',
          strokeOpacity: 1.0
        });
        mapObject.fitBounds(circle.getBounds());
        var request = {
    location: userLatLng,
    radius: 4000,
    types: ['store']
  };
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(mapObject);
  service.nearbySearch(request, callback);

但仍然无法获得地图中的位置，我想要做的是将某人定位，然后在该位置添加一个圆圈并向周围的药店展示......

Answer 1

我认为您可能无法在HTML或CSS文件中正确设置地图样式。此外，您的mapObject变量需要在任何函数之外声明。

我的map样式如下：

 <style>
      html, body, #map {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
</style>

您还需要添加Google Maps V3脚本来渲染地图。

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

然后我在JSFiddle中使用一些HTML和CSS代码尝试了你的代码，它显示了一个带圆圈的地图（获取用户位置并加载地图需要几秒钟）： https://jsfiddle.net/whdcuw7c/2/

将textSearch添加到我的Google地图脚本中

1 个答案: