myEclipse Repositories自带的googleMap例子，贴出来供学习(转载)

最新推荐文章于 2020-02-20 21:15:35 发布

原创最新推荐文章于 2020-02-20 21:15:35 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Myeclipse #Google #JSP #PHP #IDE

js&ajax&jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用MyEclipse IDE集成Google Maps API的示例应用，演示了如何通过地址获取地理位置，并在地图上显示标记及经纬度。

1.map.js

function updateAddress(address) {
    geocoder.getLatLng(address, function(location) {
        map.setCenter(location, 13);
        var marker = new google.maps.Marker(location);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(getAddressInfo(address));

        latField.value = location.lat();
        lngField.value = location.lng();
    });
}

function getAddressInfo(address) {
    return address + "<br><a href=\"http://www.myeclipseide.com\">Powered by MyEclipse IDE</a>";
}

2.google.jsp

<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>MyEclipse Google Maps Example</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">

        <script type="text/javascript"
            src="http://www.google.com/jsapi?key=ABQIAAAA7rD1jbUY1XVWsL0ov0bKehRP189eykzPrrAV7tRgT92eURxrGxQHDNt6Nc2DQaubssvpI9493dhTGg"></script>
        <script type="text/javascript">
              google.load("maps", "2");
              var map = null;
              var geocoder = null;
              google.setOnLoadCallback(function initmap() {
                  map = new google.maps.Map2(document.getElementById("map"));
                  geocoder = new google.maps.ClientGeocoder();
              });          
        </script>
        <script type="text/javascript" src="resources/map.js"></script>
    </head>
    <body>
        <h1>
            MyEclipse Google Maps Example
        </h1>

        <hr>
        <table>
            <tr>
                <td valign="top">
                    <table>
                        <tr>
                            <td valign="top" align="left">
                                Address:
                                <br>
                            </td>
                            <td />
                        </tr>
                        <tr>
                            <td valign="top" colspan="2">
                                <form onsubmit="updateAddress(addrField.value); return false">
                                    <input type="text" id="addrField">
                                    <input type="submit" value="Find" />
                                </form>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                Latitude:
                            </td>
                            <td>
                                <input type="text" id="latField" style="width: 95px" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                Longitude:
                            </td>
                            <td valign="top">
                                <input type="text" id="lngField" style="width: 95px">
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <div id="map"
                        style="border: blue 1px solid; width: 640px; height: 4800px">
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>