Question

我用一个简单的代码测试一个带有多个标记的地图并在浏览器中总是显示但是在使用内部时，用于android平台的cordova应用程序无效。这是de的例子。在此示例中，您必须使用google apis的api密钥替换文本＆＃34; yourapikey＆＃34;在谷歌网址

{{1}}

Answer 1

最后我变成了错误来自cordova的webview浏览器，它不会渲染标记，可能是因为它不像其他浏览器那样支持非常好的画布，例如firefox的chrome。所以解决方案是make和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 app的android中显示标记

1 个答案: