google-maps - 谷歌地图 - 将 v2 转换为 v3 - 拖动图标并检索纬度/经度

Question

我有一个多年前在 Google Map v2 中编写的应用程序，它显示了来自给定初始纬度/经度的地图，并在地图上放置了一个图标。该网页是一个带有经纬度文本框的表格。该页面允许用户将图标拖动到野火所在的实际位置。新的纬度/经度被放入文本框中，用户可以提交表单。我没有在 v3 中找到适合此过程的替代品。现在我收到一条错误消息，提示需要从 Google 地图获取新的 API 密钥。但我也知道在 5 月 v2 可能不再有效。所以我想将此应用程序更新到 v3。关于我在哪里可以找到这个的任何想法？这是旧页面的示例 http://nfsdata.unl.edu/wildfire/testmap.asp 该页面是用 ASP 编写的。而且我们无法访问此服务器上的 PHP。谢谢

Answer 1

这是一个非常简单的应用程序。

您的 v2 代码：

<script type="text/javascript">
//<![CDATA[
function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    var center = new GLatLng(41.33,-96.95);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());      
    map.setCenter(center, 13);
    var marker = new GMarker(center, {draggable: false});
    map.addOverlay(marker);
    GEvent.addListener(map, "click", function(overlay, point) { 
                    if (overlay) { 
                            map.removeOverlay(overlay); 
                    } else { 
                            map.clearOverlays() 
                            map.addOverlay(new GMarker(point)); 
                            document.getElementById("loclats").value = point.lat(); 
                            document.getElementById("loclongs").value = point.lng(); 

                    } 
    }); 


  }
}

//]]>
</script>

简单翻译为 v3（未测试）：

<script type="text/javascript">
//<![CDATA[
function load() {
    var center = new google.maps.LatLng(41.33,-96.95);
    map = new google.maps.Map(document.getElementById("map"),{
         center:center,
         zoom: 13
    });
   var marker = new google.maps.Marker({
         map: map,
         position:center
    });
google.maps.event.addListener(marker, "click", function() {
         marker.setMap(null);
    }); 
google.maps.event.addListener(map, "click", function(evt) { 
         var point = evt.latLng;
         marker.setPosition(point);
         document.getElementById("loclats").value = point.lat(); 
         document.getElementById("loclongs").value = point.lng(); 
    }); 


  }
}
//]]>
</script>

工作示例