【问题标题】:How to find accurate LatLng values of google map如何找到谷歌地图的准确 LatLng 值
【发布时间】:2014-06-04 11:09:38
【问题描述】:

在我的应用程序中,用户可以使用click事件找到地名,在获得地名后,我用inputField向用户显示地名,为此我编写了以下代码。

//辅助函数

function makingGeocodeRequest(obj,callback){
   var geocodeInstance=new google.maps.Geocoder();
    geocodeInstance.geocode(obj,callback);
}

google.maps.event.addListener(mapInstane,"click",function(event){
 makingGeocodeRequest(_.object(["location"],[event.latLng]),
                        function(res,status){
                            document.getElementById("field").value=res[0]["formatted_address"];
                        }
 )
})

一旦用户单击Save 按钮。我会根据地点名称找到latlng 值。使用以下代码

makingGeocodeRequest(
    _.object(["address"],[document.getElementById("field").value]),
    function(res,status){
        if (status===google.maps.GeocoderStatus.OK) {
          var latLngObj=res[0]["geometry"]["location"];
          console.log(latLngObj;
        }
    }
)

这里的问题,latlng 的值是不同的(点击事件时间纬度值和保存按钮动作纬度值)。

实际上两者都是从Google 中找到的,但它返回的纬度值不同。

当点击事件事件时,我用this图标改变光标样式。点击Save按钮后恢复默认光标。

我该如何解决这个问题。谁能帮助我。

谢谢。

【问题讨论】:

  • 如何创建标记(是否使用自定义标记图像)?
  • @Dr.Molle 是的,我正在使用自定义 markerImage。
  • 通过标记的anchor-选项调整图像的位置。默认锚是图像的底部中间(我猜你的图像需要另一个锚,没有看到图像很难说)
  • @Dr.Molle 我添加了图标,用于标记和光标样式。
  • @Dr.Molle 我更新了问题。你能检查一次吗。

标签: javascript google-maps google-maps-api-3 google-maps-markers


【解决方案1】:

要解决您的问题,您可以创建点数组,将标记添加到此数组并在地图上呈现数组的结果。

您可以这样做:

使用 Javascript,

<script type="text/javascript">
        var map;
        var markersList= [];

        function initGMap()
        {
            var latlng = new google.maps.LatLng(39, 20);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);

            // add a click event handler to the map object and get the lat Lng and then place it on the map
            google.maps.event.addListener(map, "click", function(event)
            {
                // place a marker
                placeMarker(event.latLng);

                // display the lat/lng in your form's lat/lng fields
                document.getElementById("latVal").value = event.latLng.lat();
                document.getElementById("lngVal").value = event.latLng.lng();
            });
        }
        // here is the function to place Marker on the map
        function placeMarker(location) {
            // first remove all markers if there are any
            deleteOverlays();

            var marker = new google.maps.Marker({
                position: location, 
                map: map
            });

            // add marker in markers array
            markersList.push(marker);

            //map.setCenter(location);
        }

        // Here you can use this function to delete all markers in the array
        function deleteOverlays() {
            if (markersList) {
                for (i in markersList) {
                    markersList[i].setMap(null);
                }
            markersList.length = 0;
            }
        }
    </script>

用Html代码,

<body onload="initGMap()">
    <div id="map"></div>
    <input type="text" id="latVal">
    <input type="text" id="lngVal">
</body>

【讨论】:

  • 也许你应该尝试将图像的位置设置为坐标的中心?
猜你喜欢
  • 2020-08-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-10-28
  • 1970-01-01
相关资源
最近更新 更多