javascript - 谷歌地图仅在 USB 调试时加载
问题描述
我正在使用 Google Maps API 在某些位置制作带有自定义图钉的地图。该地图在台式机上运行良好,但在我的 Android 平板电脑上无法加载 - 我在这两种情况下都使用 Chrome 对其进行测试。令我困惑的是,当我尝试 USB 调试页面时,地图开始加载;但是,一旦我关闭页面的开发人员工具并重新加载页面,地图就会再次停止加载。
一个快速的谷歌没有透露任何东西。当我调试时,控制台输出中没有任何内容。
这是我的一些代码:
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script>
<script src="js/handlebars.js"></script>
<script src="js/custom-marker.js"></script>
<script src="js/unresolved-map.js"></script>
这是 custom-marker.js:
function CustomMarker(latlng, map, args) {
this.latlng = latlng;
this.pos = latlng;
this.args = args;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = document.createElement('div');
div.innerHTML = this.args.html;
div.className = 'marker';
div.style.position = 'absolute';
if (typeof(self.args.marker_id) !== 'undefined') {
div.dataset.marker_id = self.args.marker_id;
}
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click");
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
if (point) {
div.style.left = point.x -100 + 'px';
div.style.top = point.y - 200 + 'px';
}
};
CustomMarker.prototype.remove = function() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng;
};
这是未解析的map.js:
$(function() {
window.markers = [];
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var currentCenter = new google.maps.LatLng(43.85639, 25.97083);
var mapOptions = {
zoom: 14,
center: currentCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('signals-map'), mapOptions);
for (var i = 0; i < Laravel.obektiSignals.length; i++) {
var obekt = Laravel.obektiSignals[i];
// compile handlebars template
var source = document.getElementById("marker-template").innerHTML;
var template = Handlebars.compile(source);
var html = template(obekt);
var markerPosition = new google.maps.LatLng(obekt.latitude, obekt.longitude);
window.markers.push(new CustomMarker(markerPosition, map, {html: html, marker_id: obekt['id']}));
setTimeout(function() {
resizeSignalWrappers();
zindex();
}, 300);
}
}
function zindex() {
var markers = $('.marker');
for (var i = 0; i < markers.length; i++)
{
var marker = markers.eq(i);
marker.on('click', function() {
$(this).css('z-index', starting_zindex);
starting_zindex++;
});
}
}
function resizeSignalWrappers() {
var markerSignals = $('.marker-signals');
for (var i = 0; i < markerSignals.length; i++) {
var markerSignal = markerSignals.eq(i);
var name = markerSignal.parent().find('.obekt-name');
var nameHeight = name.height();
var newHeight = 170 - (nameHeight + 5);
markerSignal.height(newHeight + 'px');
}
}
});
请注意,同样的事情发生在两个单独的页面上,这是另一个页面的代码,它只有一个 pin,它不是自定义 pin:
$(function() {
var map;
var marker;
$('#address').keydown(function(event) {
if (event.keyCode == 13)
{
addressToMap();
}
});
$(window).keydown(function(event){
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
google.maps.event.addDomListener(window, 'load', initMap);
function initMap() {
var currentLatLng;
var latitude = $('#latitude').val();
var longitude = $('#longitude').val();
if (latitude !== '' && longitude !== '')
{
currentLatLng = new google.maps.LatLng(latitude, longitude);
}
else
{
currentLatLng = new google.maps.LatLng(43.85639, 25.97083);
}
var myOptions = {
zoom: $('.obekti-form').hasClass('zoom') ? 16 : 11,
center: currentLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
marker = new google.maps.Marker({
draggable: true,
position: currentLatLng,
map: map,
title: "Selected location"
});
google.maps.event.addListener(map, 'click', function(event) {
marker.setPosition(event.latLng);
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
$('#latitude').val(latitude);
$('#longitude').val(longitude);
$('#latlng').val(latitude + ',' + longitude);
});
}
function addressToMap()
{
var address = $.trim($('#address').val());
if (address == '')
{
return;
}
$.post('https://maps.googleapis.com/maps/api/geocode/json?key=' + GOOGLE_MAPS_API_KEY + '&address=' + address, function(data) {
if (data.status !== 'ZERO_RESULTS')
{
var lat = data.results[0].geometry.location.lat;
var lng = data.results[0].geometry.location.lng;
map.setCenter({lat: lat, lng: lng});
if (data.results[0].geometry.viewport)
{
// fit to the bounds of the searched location
var southwestLatLng = new google.maps.LatLng(data.results[0].geometry.viewport.southwest.lat, data.results[0].geometry.viewport.southwest.lng);
var northeastLatLng = new google.maps.LatLng(data.results[0].geometry.viewport.northeast.lat, data.results[0].geometry.viewport.northeast.lng);
var bounds = new google.maps.LatLngBounds(southwestLatLng, northeastLatLng);
map.fitBounds(bounds);
}
marker.setPosition(new google.maps.LatLng(lat, lng));
$('#latitude').val(lat);
$('#longitude').val(lng);
$('#latlng').val(lat + ',' + lng);
}
});
}
});
请注意,我正在从数据库中获取一些数据(Laravel.obektiSignals),以便将其显示为引脚。另请注意,我正在使用 Handlebars.js 编译 html 模板。
EDIT1:刚刚在桌面 Firefox 中进行了测试,它可以工作,但在我清除缓存后只有一次,当再次加载时,它会停止加载控制台中的任何错误。
解决方案
删除包裹在代码周围的 jQuery 可以解决问题,或者换句话说,这段代码:
$(function() {
});
有趣的是为什么会发生这种情况,但我认为很难找出答案。
推荐阅读
- ios - 使用macOS Mojave和Xcode 10.0成功构建iOS框架但框架文件为0KB
- javascript - Angularjs:对象数组中的ng-repeat过滤器对象
- node.js - Mongoose 子文档不更新时间戳
- excel - 如何在Excel中的组中查找不同的值
- r - ggplot2的y轴上是否可以有整数和小数的组合?
- php - 重写规则以处理同一域中的 mediawiki 和 wordpress 安装
- python - 如何从python中的许多word文档中的多个表中提取所有数据(直接从MS Word中提取数据)?
- javascript - three.js 的 EventDispatcher 可以用于类之间的通信吗?
- c# - How to uncheck other checkboxes or uncheck radio button?
- .htaccess - htaccess - how to add automatically "http://servename.com/" to all internat urls?