Set Map不是Map的实例,也不是StreetViewPanaroma的实例

时间:2019-09-29 23:32:27

标签: javascript google-maps

在GoogleMaps API上运行来自Google文档的代码时,出现此错误:https://developers.google.com/maps/documentation/javascript/customoverlays

我正在尝试遵循编写的内容,这是我的代码:

var overlay;
CustomImageOverly.prototype = new google.maps.OverlayView();


function init() {

    var pos= {lat: 62.323907, lng: -150.109291};
    var mapProp= {
      center:new google.maps.LatLng(pos),
      zoom:4,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      styles: [{
                  featureType: 'water',
                  elementType: 'geometry',
                  stylers: [{color: '#3498DB'},
                            {visibility: 'on'}]
                }]
    };
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);



      var bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(62.281819, -150.287132),
        new google.maps.LatLng(62.400471, -150.005608));


        var srcImage = 'https://developers.google.com/maps/documentation/' +
        'javascript/examples/full/images/talkeetna.png';
        debugger;
        overlay = new CustomImageOverly(bounds, srcImage, map);
}

function CustomImageOverly(bounds, image, map)  {

  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  this.div_ = null;

  this.setMap(map);
}

我在做什么错了?

1 个答案:

答案 0 :(得分:0)

我发现自己做错了。我使用google api方法时没有先在html中初始化google api。

我从这里得到了答案:https://stackoverflow.com/a/58161132/3277177

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

然后在我的Javascript代码中:

var map;
CustomImageOverly.prototype = new google.maps.OverlayView();

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(62.281819, -150.287132),
    new google.maps.LatLng(62.400471, -150.005608));

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
  srcImage += 'examples/full/images/talkeetna.png';

  overlay = new CustomImageOverly(bounds, srcImage, map);
}

function CustomImageOverly(bounds, image, map) {

  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  this.div_ = null;

  this.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);