个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 02:28:08 24 4
gpt4 key购买 nike

我正在使用一个简单的代码测试带有多个标记的 map ，并且在浏览器中始终显示，但在 Android 平台的 cordova 应用程序内使用时无法正常工作。这是示例。在此示例中，您必须将 google url 中的文本“yourapikey”替换为 google api 的 api key 

    <!-- <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浏览器，它不渲染标记，可能是因为它不像其他浏览器(如firefox的chrome)那样支持很好的 Canvas 。所以解决方案是 make 并覆盖这里是我的代码示例，现在可以在 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中不显示标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48558028/

24 4 0
文章推荐： javascript - 执行前不显示 AngularJS 代码
文章推荐： javascript - FeathersJS - 在哪里链接钩子(Hook)？
文章推荐： smalltalk - 当我加载包含此类的 Monticello 包时，是否有特定的方法会在类中执行？
文章推荐： javascript - 如何使用 moment.js 将 JS Date 解析为特定格式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com