Question

我有谷歌地图，我有很多不同位置的坐标。我需要做的是 - 它是一个按钮，当你按下它时，它会将用户重新定位到不同的坐标

我很困惑怎么做

我只用不同的按钮 - Erco's FLTK Cheat Page -> Fl_Group Event vs. Draw Clipping

制作了这样的例子

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false">

</script>
<div id="map_canvas" style="width: 100%; height: 400px"></div>
<div id="menu">
    <input type="button" id="panLA" value="Pan To Los Angeles" />
    <input type="button" id="panLB" value="Pan To Long Beach" />

    <input type="button" id="london" value="london" />
    <input type="button" id="leeds" value="leeds" />
    <input type="button" id="cambridge" value="cambridge" />
    <input type="button" id="edinburg" value="edinburg" />
    <input type="button" id="miami" value="miami" />

</div>
<div id="data"></div>

和JS：

var map;

$(document).ready(function() {
    initialize();

    $("#menu").on("click", "#panLA", function() {
        var laLatLng = new google.maps.LatLng(34.01131647557699, -118.25599389648437);
        marker.setPosition(laLatLng);
        map.panTo(laLatLng);
    });
    $("#menu").on("click", "#panLB", function() {
        var laLatLng = new google.maps.LatLng(33.70131647557699, -118.15599389648437);

marker.setPosition(laLatLng);        map.panTo(laLatLng);
    });

    $("#menu").on("click", "#london", function() {
        var laLatLng = new google.maps.LatLng(51.501417, -0.020886);;marker.setPosition(laLatLng);
        map.panTo(laLatLng);
    });
    $("#menu").on("click", "#leeds", function() {
        var laLatLng = new google.maps.LatLng(53.708214, -1.621459);marker.setPosition(laLatLng);
        map.panTo(laLatLng);
    });
    $("#menu").on("click", "#cambridge", function() {
        var laLatLng = new google.maps.LatLng(52.231462, 0.147424);marker.setPosition(laLatLng);
        map.panTo(laLatLng);
    });
    $("#menu").on("click", "#edinburg", function() {
        var laLatLng = new google.maps.LatLng(55.94756, -3.211026);marker.setPosition(laLatLng);
        map.panTo(laLatLng);
    });
    $("#menu").on("click", "#miami", function() {
        var laLatLng = new google.maps.LatLng(25.77248, -80.186847);marker.setPosition(laLatLng);
        map.panTo(laLatLng);
    });
});

function initialize() {
    var myLatlng = new google.maps.LatLng(51.5120, -0.12);
    var myOptions = {
        zoom: 16,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles:[{
            "featureType": "poi",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "water",
            "stylers": [{
                "color": "#d2d2d2"
            }]
        }, {
            "featureType": "landscape.man_made",
            "elementType": "labels",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "transit.line",
            "stylers": [{
                "visibility": "simplified"
            }, {
                "color": "#b5b5b5"
            }]
        }, {
            "featureType": "road.arterial",
            "elementType": "geometry.stroke",
            "stylers": [{
                "visibility": "on"
            }, {
                "color": "#b4b4b4"
            }, {
                "weight": 0.1
            }]
        }, {
            "featureType": "road.arterial",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#b4b4b4"
            }]
        }, {
            "featureType": "road.local",
            "elementType": "geometry.stroke",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "road.arterial",
            "elementType": "labels.text.stroke",
            "stylers": [{
                "color": "#808080"
            }, {
                "visibility": "simplified"
            }]
        }, {
            "featureType": "road.highway",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#b4b4b4"
            }]
        }]

    };
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

     marker = new google.maps.Marker({
        position: myLatlng,
        icon: "http://unfold.no/css/images/map-marker.png",
        map: map
    });
}

但我真的不知道如何用所有坐标制作一个按钮

感谢您的帮助！

Answer 1

我要做的是将lat lang存储在html属性中。

<input type="button" data-attr-lat="34.01131647557699" data-attr-lng="-118.25599389648437" id="panLA" value="Pan To Los Angeles" />

在你的jquery中，你应该能够拥有一个功能：

$('menu input[type="button"]').on('click',function(){
     let lat = $(this).attr('data-attr-lat');
     let lng = $(this).attr('data-attr-lng');
     let latLng = new google.maps.LatLng(lat, lng);
     marker.setPosition(latLng);
     map.panTo(latLng);
});

工作原理：

$('menu input[type="button"]')

以上代码选择菜单中的每个按钮

.on('click',function(){})

上面的代码为$('menu input[type="button"]')

返回的每个按钮附加了一个点击监听器

   let lat = $(this).attr('data-attr-lat');
   let lng = $(this).attr('data-attr-lng');

在上面的代码中$(this)指的是触发事件的按钮（被点击的按钮），然后我们使用jquery .attr()函数从中检索lat和lang。然后将它们用于构建我们的新谷歌地图LatLng对象。

在意识到您只需要一个按钮后更新：

HTML：

<div id="menu">
<input type="button" id="panBtn" value="Pan To Los Angeles" />
</div>

使用Javascript：

const coordinateArray = [
    new google.maps.LatLng(34.01131647557699, -118.25599389648437),
    new google.maps.LatLng(33.70131647557699, -118.15599389648437),
    new google.maps.LatLng(51.501417, -0.020886),
    new google.maps.LatLng(53.708214, -1.621459),
    new google.maps.LatLng(52.231462, 0.147424),
    new google.maps.LatLng(55.94756, -3.211026),
    new google.maps.LatLng(25.77248, -80.186847)
 ];
 let currentPosition = 0;
 $('#menu #panBtn').on('click',function(){
     let latLng = coordinateArray[(currentPosition++)%coordinateArray.length];
     marker.setPosition(latLng);
     map.panTo(latLng);
});

使用坐标数组创建按钮，当您按下它时将重新定位

1 个答案: