如何创建一个按钮,以交互方式更改地图上的位置,询问用户新的坐标?

时间:2014-02-20 19:31:41

标签: javascript html5 google-maps

的Javascript

function newCoordinate (){

}

Html 5

<body>
    <div id="map_canvas"></div>
        <input type="button" id="recenter" value="re-center" onclick="moveToLocation(50.63,0);"/>
        <input type="button" id="MoveToRandom" value="random" onclick="moveToRandom();"/>
</body>

1 个答案:

答案 0 :(得分:1)

以下示例http://jsfiddle.net/user2314737/DuRhR/允许您将地图居中到输入纬度和经度坐标。另一个按钮将地图平移到随机点。

您还可以查看本教程:https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

Javascript函数:

var map;
var marker;

function initialize() {

    var myLatLng = new google.maps.LatLng(45.4375, 12.3358);
    myOptions = {
        zoom: 5,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    marker = new google.maps.Marker({
        position: myLatLng,
        map: map
    });

    marker.setMap(map);
}

function moveToLocation() {
    var center = new google.maps.LatLng(document.getElementById("lat").value,
    document.getElementById("lng").value);
    map.panTo(center);
    marker.setPosition(center);
}

function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}

function moveToRandom() {
    var center = new google.maps.LatLng(getRandom(-90, 90), getRandom(-180, 180));
    map.panTo(center);
    marker.setPosition(center);
}

initialize();

HTML:

<div id="map-canvas"></div>

<input type="text" id="lat" /> 
<input type="text" id="lng" />

<input type="button" id="recenter" value="re-center" onclick="moveToLocation();" />
<input type="button" id="MoveToRandom()" value="random" onclick="moveToRandom();" />