3

我对谷歌地图很陌生。我要做的是设置一个地图，当单击 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>

...但是访问菜单时没有任何反应。谁能指出我正确的方向 - 所有建议都非常感谢！

4

2 回答 2

6

我做了几个改变，

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

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

(3)setOptions调用recenterer和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"
    })
}​

...

    <select id="placeSelect" onchange="resetMap()">
        <option value="53.39433,-1.25754">Thurcroft</option>
        <option value="53.41615,-1.27833">Wickersley</option>
        ...
于 2012-06-18T23:47:46.230 回答
0

你不能把一个onclick函数放在一个选项中，你必须把一个onchange函数放在这样的选择标签中，

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

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

于 2012-06-18T00:50:45.943 回答