Question

这里有一个来自“ 地图框”的地图，我从用户处获取经纬度，然后将地图的坐标更改为用户想要的位置...

我想更改地图的样式，但我不能这样做。.我从mapbox文档中获取了代码更改样式，但没有用

知道我放弃了，我想要一个解决方案

这是我的代码 .....

            <!DOCTYPE html>
            <html>

            <head>
                <link href="bootstrap.css" rel='stylesheet' />
                <script src="jquery-3.3.1.js"></script>
                <script src="bootstrap.js"></script>
                <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
                <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
                <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />

                <style>
                    body {
                        margin: 0;
                        padding: 0;
                    }

                    #map {
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        width: 100%;
                        height: 400px;
                    }

                    #menu {
                        position: absolute;
                        background: #fff;
                        padding: 10px;
                        font-family: 'Open Sans', sans-serif;
                    }
                </style>
            </head>

            <body>


                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" id="lng" class="form-control" placeholder="خط الطول" />
                        </div>
                        <div class="col-md-6">
                            <input type="text" id="lat" class="form-control" placeholder="خط العرض" />
                        </div>
                    </div>
                </div>

                <br> <br>
                <div class="container">
                    <div class="row">
                        <div class="col-md-5">

                        </div>
                        <div class="col-md-5">
                            <input type="button" id="btn" class="btn btn-primary" value="بحث" />
                        </div>
                    </div>
                </div>


                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div id='menu'>
                                <input id='streets-v11' type='radio' name='rtoggle' value='streets' checked='checked'>
                                <label for='streets'>streets</label>
                                <input id='light-v10' type='radio' name='rtoggle' value='light'>
                                <label for='light'>light</label>
                                <input id='dark-v10' type='radio' name='rtoggle' value='dark'>
                                <label for='dark'>dark</label>
                                <input id='outdoors-v11' type='radio' name='rtoggle' value='outdoors'>
                                <label for='outdoors'>outdoors</label>
                                <input id='satellite-v9' type='radio' name='rtoggle' value='satellite'>
                                <label for='satellite'>satellite</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div id='map'></div>
                        </div>
                    </div>
                </div>

                <script>

                    function myMap(mapContainer, lng, lat) {
                        mapboxgl.accessToken = 'pk.eyJ1IjoibWFqZWQ3MDgwIiwiYSI6ImNqdnoyNzR0MDBjZ3UzeW1uMHVlYW0zOWoifQ.8kJinzAzE2RlmyUkId0kWQ';
                        var map = new mapboxgl.Map({
                            container: 'map', // container id
                            style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
                            center: [lng, lat], // starting position [lng, lat]
                            zoom: 9 // starting zoom
                        });

                        var marker = new mapboxgl.Marker()
                            .setLngLat([lng, lat])
                            .addTo(map);


                    };

                    var layerList = document.getElementById('menu');
                    var inputs = layerList.getElementsByTagName('input');


                    function switchLayer(layer) {
                        var layerId = layer.target.id;
                        new mapboxgl.map()
                        map.setStyle('mapbox://styles/mapbox/' + layerId);
                    }

                    for (var i = 0; i < inputs.length; i++) {
                        inputs[i].onclick = switchLayer;
                    }


                    $(document).ready(function () {
                        myMap($("#map"), -74.50, 40);

                        $("#btn").click(function () {
                            var myLat = $("#lat").val();
                            var myLng = $("#lng").val();
                            myMap($("#map"), myLat, myLng);
                        });




                    });
                </script>

            </body>

            </html>

在mapbox gl js中更改地图样式

0 个答案: