google-maps - 添加带有图像层的 KML 层 - 未加载
问题描述
我正在尝试添加自定义叠加层和 Kml 层。自定义图层正在工作,但 KML 图层根本没有显示。什么会导致这个?
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: {lat: 31.1917, lng: 27.56553},
mapTypeId: 'satellite'
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(31.18954, 27.56144),
new google.maps.LatLng(31.19277, 27.56806));
var srcImage = 'https://travcop.zohosites.com/selc02.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
/** @constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
var kmlLayer = new google.maps.KmlLayer({
url: 'https://travcop.zohosites.com/sel.kml',
suppressInfoWindows: true,
map: map
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
google.maps.event.addDomListener(window, 'load', initMap);
我不确定为什么没有加载 KML 层。可以同时加载两层吗?
尝试创建一个房地产门户网站,其中数据以 KML 标记,地图用于尚未在 Google 地图上显示的未来项目
解决方案
发布的代码出现 javascript 错误:Uncaught ReferenceError: map is not defined
.
该map
变量是您的initMap
函数的本地变量,您需要在方法KmlLayer
内部实例化initMap
。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: {lat: 31.1917, lng: 27.56553},
mapTypeId: 'satellite'
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(31.18954, 27.56144),
new google.maps.LatLng(31.19277, 27.56806));
var srcImage = 'https://travcop.zohosites.com/selc02.png';
overlay = new USGSOverlay(bounds, srcImage, map);
var kmlLayer = new google.maps.KmlLayer({
url: 'https://travcop.zohosites.com/sel.kml',
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
}
一旦我解决了这个问题,就会出现另一个错误:Uncaught ReferenceError: overlayProjection is not defined
,因为overlayProjection
没有定义。采用谷歌示例中的定义可以解决这个问题。
代码片段:
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: {
lat: 31.1917,
lng: 27.56553
},
mapTypeId: 'satellite'
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(31.18954, 27.56144),
new google.maps.LatLng(31.19277, 27.56806));
var srcImage = 'https://travcop.zohosites.com/selc02.png';
overlay = new USGSOverlay(bounds, srcImage, map);
var kmlLayer = new google.maps.KmlLayer({
url: 'https://travcop.zohosites.com/sel.kml',
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
google.maps.event.addListener(kmlLayer, 'status_changed', function() {
console.log(kmlLayer.getStatus());
})
map.fitBounds(bounds);
}
/** @constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
推荐阅读
- java - Eclipse IDE 内部和外部 Tomcat 调用上下文的差异
- raspberry-pi - 如何通过终端将 Raspbian OS 4.14 升级到 4.19
- arrays - BeautifulSoup,请求,数据框保存到 Excel 数组错误
- asp.net - 500 - 内部服务器错误,将 windows server 2012 R2 迁移到 windows server 2016 后
- ruby-on-rails - 有没有办法将同一组 id 发送到两个不同的操作,例如 new 和 show?
- reactjs - 使用酶发送到子元素的测试回调函数
- mysql - 在不停止 docker 容器的情况下在 docker 中停止 mysql
- ruby-on-rails - 修复已删除表(包括模型)的现有迁移的未初始化常量错误
- docker - Makefile 中的嵌套变量为 docker 提供条件支持
- ios - + 符号在 iOS 中转换为空格 如何避免?