Question

我正在尝试在地图上显示纬度和经度坐标。这工作正常，但一旦显示，我还想在同一地图上显示用户当前位置，同时显示其他位置。有人可以告诉我这是怎么做的。这就是我用来显示纬度和经度的方法。

function showPosition()
{
//var latlon=position.coords.latitude+","+position.coords.longitude;
var lat = document.getElementById("saved_lat").value;
var lon = document.getElementById("saved_lon").value;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
 + lat + "," + lon +"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";

}

Answer 1

首先，您需要获取用户当前的lat / lng位置。然后你需要使用＆＃39;标记＆＃39;静态地图中的参数显示两个标记，一个用于保存的位置，另一个用于用户的位置。

您可以在此处获取有关如何使用标记的说明： https://developers.google.com/maps/documentation/staticmaps/?csw=1#MarkerLocations

以下是您的代码的工作修改。这里有一些提示：

为了演示目的，我在声明中硬连线saved_lat / lon值。您需要替换这些或使用您自己的HTML代码。
用户的坐标是从HTML地理定位方法navigator.geolocation获得的。此方法将用户位置的纬度/经度传递给ShowPosition（）函数。
我更新了您的ShowPosition（）函数：

一个。以用户的lat / lon为参数 B.添加变量＆＃39;标记＆＃39;在谷歌静态地图中设置两个标记（已保存和用户）。 C.添加了变量＆＃39; zoom＆＃39;设置缩放级别。

<script>
    // Get User's Coordinate from their Browser
    window.onload = function () {
        // HTML5/W3C Geolocation
        if ( navigator.geolocation )
            navigator.geolocation.getCurrentPosition( UserLocation );
        // Default to Washington, DC
        else
            ShowPosition( 38.8951, -77.0367 );
    }

    // Callback function for asynchronous call to HTML5 geolocation
    function UserLocation( position )
    {
        ShowPosition( position.coords.latitude, position.coords.longitude );
    }

    function ShowPosition( user_lat, user_lon )
    {   
        var lat = document.getElementById("saved_lat").value; 
        var lon = document.getElementById("saved_lon").value;

        var markers = "&markers=color:blue|label:S|" + lat + "," + lon + "|" + user_lat + "," + user_lon;
        var zoom="&zoom=11";

        var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
        + lat + "," + lon +"&size=400x300&sensor=false" + zoom + markers;
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
</script>


<body>
    <div id="mapholder"></div>
    <input type="hidden" id="saved_lat" value="45.65"/>
    <input type="hidden" id="saved_lon" value="-122.45"/>
</body>

在同一地图上显示未知坐标和当前位置

1 个答案: