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

Question

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

Ali*_*liH 3 javascript center onclick google-maps-api-3

我对谷歌地图很陌生。我想要做的是设置一个地图，当单击 HTML 菜单时，该地图将以点为中心。

如果控件位于地图之外，我是否正确地说我不需要事件侦听器？

这是我在 head 部分的代码：

 <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>

Run Code Online (Sandbox Code Playgroud)

和 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>

Run Code Online (Sandbox Code Playgroud)

...但是当访问菜单时什么也没有发生。任何人都可以指出我正确的方向-感谢所有建议！

Answer 1

Tin*_*ehr 6

我做了几个改变，

(1)map成为全局变量（放置在函数之外的级别），因此可以在init和resetMap

(2) 选项值保存一个带有坐标的字符串，但google.maps.LatLng需要两个参数，所以字符串在逗号处被拆分

(3)setOptions调用recenter和zoom，也可以调用单独的函数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"
    })
}?

Run Code Online (Sandbox Code Playgroud)

...

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，5 月前
查看次数：	7811 次
最近记录：	6 年，2 月前