谷歌地图:使用菜单设置新的中心点

Google Maps: Setting a new centre point using a menu

本文关键字：中心点 设置 菜单 谷歌地图      更新时间：2023-09-26

我对谷歌地图很陌生。我正在尝试做的是设置一个地图，当单击 HTML 菜单时，该地图将居中到点。

我说如果控件在映射之外，我不需要事件侦听器是对的吗？

这是我在头部部分的代码：

 <script type="text/javascript">
        function init() {
            var myLatlng = new google.maps.LatLng(53.53562,-1.05642);
            var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            //draw the map
            var map = new google.maps.Map(document.getElementById("map"), myOptions);
            //set up the marker
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
            }); 
        }
        function resetMap(lat,long) {
                var latlong = lat+","+long;
                var newPos = new google.maps.LatLng(latlong)({
                setCenter: latlong,
                map: map,
                zoom:15,
            })
            //add a marker
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title:"New marker",
            })
        }   
    </script>

HTML 是这样的：

<body onLoad="init()">
    <div id="selecter">
        <select>
            <option onClick="resetMap(53.39433,-1.25754);">Thurcroft</option>
            <option onClick="resetMap(53.41615,-1.27833);">Wickersley</option>
            <option onClick="resetMap(53.47929,-1.14828);">M18/A1</option>
            <option onClick="resetMap(53.47802,-1.06633);">Rossington</option>
            <option onClick="resetMap(53.53562,-1.05642);">Armthorpe</option>
            <option onClick="resetMap(53.5914,-0.98797);">J5 M180</option>
            <option onClick="resetMap(53.61159,-0.96308);">Thorne</option>
            <option onClick="resetMap(53.62769,-0.95181);">Moorends</option>
        </select>
    </div>
    <div id="map">
    </div>
</body>

。但是访问菜单时没有任何反应。任何人都可以指出我正确的方向 - 所有建议都表示赞赏 ta！

我做了一些更改，

（1） map成为全局变量（放置在函数外部的级别），因此可以在init和resetMap中对其进行修改

（2） 选项值包含一个带有坐标的字符串，但google.maps.LatLng需要两个参数，因此字符串在逗号处被拆分

（3）setOptions调用重新居中和缩放，也可以调用各个函数setZoom和setCenter

演示和更新的代码 

function resetMap() {
    // retrieve new selection
    var latlongChoice = document.getElementById("placeSelect").value;
    // separate into lat and long
    var latlongParts = latlongChoice.split(",");
    var newPos = new google.maps.LatLng(latlongParts[0], latlongParts[1]);
    map.setOptions({
        center: newPos,
        zoom: 15
    });
    //add a marker
    var marker = new google.maps.Marker({
        position: newPos,
        map: map,
        title: "New marker"
    })
}​

。

    <select id="placeSelect" onchange="resetMap()">
        <option value="53.39433,-1.25754">Thurcroft</option>
        <option value="53.41615,-1.27833">Wickersley</option>
        ...
你不能把

onclick函数放在一个选项中，你必须像这样把一个onchange函数放在select标签中，

<select onchange="resetMap('53.39433', '-1.25754');">
    <option>Thurcroft</option>
    <option>Wickersley</option>
</select>

您还必须确保在文件中包含地图 URL

相关文章：