Question

家伙！

我正在尝试集成Google地图并使用Places API。我有一个文本框和一个谷歌地图（由于一些奇怪的原因没有加载），我试图在地图API的帮助下绘制谷歌地图中文本框中输入的地址。

但是，谷歌地图没有加载，它也没有在控制台中抛出任何错误。 Places API工作正常，我可以搜索地址，我也可以返回坐标，但我看不到谷歌地图或在该位置添加标记。

这是我的HTML代码：

<div ng-app="myApp" ng-controller="myMap">
<div class="form-group"  >
  <label for="source_point">
    <h2>Address</h2></label>
  <input type="text" id="source_point" name="source_point" class="form-control" placeholder="Enter your pick up address here">

  <p id="pickup_location"></p>
  <input type="text" id="src_lat" name="src_lat" placeholder="latitude">
  <input type="text" id="src_long" name="src_long" placeholder="longitude">
</div>
<!-- Map div -->
<div id="source_map"></div>
</div>

这是我的控制器：

angular.module('myApp', []).
controller('myMap', function() {

  var map;
  var marker;
  var latLngC;

  function initialize() {
    latLngC = new google.maps.LatLng(14.5800, 121.0000);
    var mapOptions = {
      center: latLngC,
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    map = new google.maps.Map(document.getElementById('source_map'),
      mapOptions);

    var marker = new google.maps.Marker({
      position: latLngC,
      map: map,
      draggable: true
    });

    //Add marker upon clicking on map
    //google.maps.event.addDomListener(map, 'click', addMarker);
    google.maps.event.addDomListener(map, 'click', function() {
      addMarker(map);
    });

    var places1 = new google.maps.places.Autocomplete(document.getElementById('source_point'));
    google.maps.event.addListener(places1, 'place_changed', function() {
      var place1 = places1.getPlace();

      var src_addr = place1.formatted_address;
      var src_lat = place1.geometry.location.lat();
      var src_long = place1.geometry.location.lng();

      var mesg1 = "Address: " + src_addr;
      mesg1 += "\nLatitude: " + src_lat;
      mesg1 += "\nLongitude: " + src_long;
      //alert(mesg1);

      document.getElementById('src_lat').value = src_lat;
      document.getElementById('src_long').value = src_long;
      document.getElementById('pickup_location').innerHTML = src_lat + ' , ' + src_long;
    });
    //Add marker upon place change          
    google.maps.event.addDomListener(places1, 'place_changed', function() {
      addMarker(map);
    });

  }
  google.maps.event.addDomListener(window, 'resize', initialize);
  google.maps.event.addDomListener(window, 'load', initialize);

  //Function to add marker upon clicking on a location in map
  function addMarker(map) 
  {
    var lat = document.getElementById('src_lat').value;
    var loong = document.getElementById('src_long').value;
    if (!lat || !loong) return;

    var coordinate = new google.maps.LatLng(lat, loong);
    if (marker) 
    {
      //if marker already was created change positon
      marker.setPosition(coordinate);
      map.setCenter(coordinate);
      map.setZoom(18);
    } 
    else 
    {
      //create a marker
      marker = new google.maps.Marker({
        position: coordinate,
        map: map,
        draggable: true
      });
      map.setCenter(coordinate);
      map.setZoom(18);
    }
  }

});

我还创建了一个小提琴来展示这件事是如何运作的：从here看一下。

Answer 1

您使用PresenterWidget代替#gmap。看看here

这是你固定的CSS：

source_map

angularJS：谷歌地图没有加载场所API

1 个答案: