带有多个标记的javascript googlemaps没有使用cordova应用程序在android中显示标记
Posted
技术标签:
【中文标题】带有多个标记的javascript googlemaps没有使用cordova应用程序在android中显示标记【英文标题】：javascript googlemaps with multiple markers not showing markers in android using cordova app 【发布时间】：2018-07-11 11:59:11 【问题描述】：我用一个简单的代码测试带有多个标记的地图，并且在浏览器中始终显示，但是在用于 android 平台的cordova 应用程序中使用时无法正常工作。这是de示例。在此示例中，您必须用您的 google api 的 api 密钥替换 google url 中的文本“yourapikey”
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Google Maps Multiple Markers</title>
<script src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" type="text/javascript"></script>
</head>
<body>
<div class="app">
<div id="map" style="height: 400px; width: 500px;">
</div>
<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'),
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++)
marker = new google.maps.Marker(
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
);
google.maps.event.addListener(marker, 'click', (function(marker, i)
return function()
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
)(marker, i));
</script>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
【问题讨论】：
我认为它与cordova的webview有关，因为我试图用chrome浏览器查看并工作。 我也使用人行横道插件，但没有运气 【参考方案1】：最后我发现错误来自cordova的webview浏览器，它不呈现标记，可能是因为它不像其他浏览器（如firefox的chrome）那样支持画布。所以解决方案是 make and overlay 这里是我的代码示例，现在可以在 Cordova android 平台上运行。
这是html
<head>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Google Maps Multiple Markers</title>
</head>
<body>
<div class="app">
<button onclick="dale()">click</button>
<button onclick="dale2()">click2</button>
<div id="map" style="height: 400px; width: 500px;">
</div>
<script type="text/javascript">
</script>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyBosuhuoHgQDdhUBYc_YgspOHPDFkvhuD8&libraries=drawing,place,geometry,visualization&callback=initMap" type="text/javascript"></script>
</body>
这是 init.js
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map;
var CustomMarker;
function initMap()
initCustomMarker();
map = new google.maps.Map(document.getElementById('map'),
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
);
function addMarkers()
var infowindow = new google.maps.InfoWindow();
var overlay, i;
for (i = 0; i < locations.length; i++)
overlay = new CustomMarker(
new google.maps.LatLng(locations[i][1],locations[i][2]),
map,
marker_id: '123',
color: 'Red',
titulo : locations[i][0],
infowindow : infowindow
);
function dale()
debugger;
console.log(map);
console.log(google.maps);
addMarkers();
function dale2()
console.log(map);
console.log(google.maps);
var overlay = new CustomMarker(
new google.maps.LatLng(-33.890542, 151.274856),
map,
marker_id: '123',
color: 'Red',
titulo : 'Podcast',
infowindow: new google.maps.InfoWindow()
);
var app =
// Application Constructor
initialize: function()
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
,
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function()
this.receivedEvent('deviceready');
,
// Update DOM on a Received Event
receivedEvent: function(id)
console.log('Received Event: ' + id);
initMap();
;
function initCustomMarker()
CustomMarker = function (latlng, map, args)
this.latlng = 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.className = 'marker';
div.style.position = 'absolute';
div.style.cursor = 'pointer';
div.style.width = '20px';
div.style.height = '20px';
if(this.args.color != null)
div.style.background = this.args.color;
else
div.style.background = 'blue';
if (typeof(self.args.marker_id) !== 'undefined')
div.dataset.marker_id = self.args.marker_id;
var infowindow = this.args.infowindow;
var content = this.makeContent();
var map = this.map;
var latlng = this.latlng;
google.maps.event.addDomListener(div, "click", function(event)
google.maps.event.trigger(self, "click");
infowindow.setPosition(latlng);
infowindow.setContent(content);
infowindow.open(map);
);
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
if (point)
div.style.left = point.x + 'px';
div.style.top = point.y + 'px';
;
CustomMarker.prototype.remove = function()
if (this.div)
this.div.parentNode.removeChild(this.div);
this.div = null;
;
CustomMarker.prototype.getPosition = function()
return this.latlng;
;
CustomMarker.prototype.makeContent = function()
var res = "<div>";
if(this.args.titulo != null)
res += "<h6>"+this.args.titulo+"</h6>";
res += "<p> "+this.latlng.lat()+", "+this.latlng.lng()+"</p>";
res += "</div>";
return res;
;
app.initialize();
【讨论】：
以上是关于带有多个标记的javascript googlemaps没有使用cordova应用程序在android中显示标记的主要内容，如果未能解决你的问题，请参考以下文章
Angularjs - ng-map - Google Maps Javascript API v3 - 如何为多个标记设置最佳缩放