带有多个标记的javascript googlemaps没有使用cordova应用程序在android中显示标记答案

【问题标题】：javascript googlemaps with multiple markers not showing markers in android using cordova app带有多个标记的javascript googlemaps没有使用cordova应用程序在android中显示标记
【发布时间】：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浏览器查看并工作。
我也使用人行横道插件，但没有运气

标签： javascript android google-maps cordova markers

【解决方案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();

【讨论】：