jQuery根据地址获取经纬度

一、HTML部分

  @*景区位置*@
                            <tr>
                                <th>景区名称：</th>
                                <td><input class="txt br2" name="ScenicSpotName" id="ScenicSpotName" type="text" size="30" value="@Model.ScenicSpotName" required></td>
                            </tr>
                            <tr class="IsType1Show">
                                <th>景区地址:</th>
                                <td>
                                    <select class="text" id="province" name="province" data-value="@Model.Province"></select>
                                    <select class="text" id="city" name="city" data-value="@Model.City"></select>
                                    <select id="area" name="area" data-value="@Model.Area"></select>
                                    <div id="show"></div>

                                    @*<select name="Province" id="Province" onchange="provincechange(this.selectedIndex)"><option>@(Model.Province == null ? "请选择省份" : Model.Province)</option></select>
                                        <select name="City" id="City" onchange="citychange(this.selectedIndex)"><option>@(Model.City == null ? "请选择城市" : Model.City)</option></select>
                                        <select name="Area" id="Area"><option>@(Model.Area == null ? "请选择区" : Model.Area)</option></select>

                                        <input class="txt br2" name="ProvinceSelected" id="ProvinceSelected" type="text" size="30" value="@Model.Province" hidden>
                                        <input class="txt br2" name="CitySelected" id="CitySelected" type="text" size="30" value="@Model.City" hidden>
                                        <input class="txt br2" name="AreaSelected" id="AreaSelected" type="text" size="30" value="@Model.Area" hidden>*@
                                </td>
                            </tr>
                            <tr class="IsType1Show">
                                <th><b>景点详细地址：</b></th>
                                <td>
                                    <input class="txt br2" name="Address" id="Address" type="text" size="60" placeholder="街道或景区名称" value="@Model.Address" required>
                                    <input type="button" style="height:30px;background-color:#ebebeb;border:1px solid #bcbcbc" onclick="getPoint()" value="生成景区经纬度" />
                                </td>
                            </tr>
                            <tr class="IsType1Show">
                                <th>景点经度：</th>
                                <td><input class="txt br2" name="longitude" id="longitude" type="text" size="30" value="@Model.longitude" required></td>
                            </tr>


                            <tr class="IsType1Show">
                                <th>景点纬度：</th>
                                <td><input class="txt br2" name="latitude" id="latitude" type="text" size="30" value="@Model.latitude" required></td>
                            </tr>

                            @*地图*@
                            <tr class="demo IsType1Show" id="demo" style="display:none;">
                                <th></th>
                                <td id="l-map" style="display:inline;"></td>
                                <td id="r-result" style="float:left;display:inline;"></td>
                            </tr>

二、JS部分

　　<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
 1  <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("l-map");            // 创建Map实例
        map.centerAndZoom(new BMap.Point(120.143814, 30.291648), 10);
        map.enableScrollWheelZoom();
        var local = new BMap.LocalSearch("全国", {
            renderOptions: {
                map: map,
                panel: "r-result",
                autoViewport: true,
                selectFirstResult: false
            }
        });
        map.addEventListener("click", function (e) {

            document.getElementById("longitude").value = e.point.lng;
            document.getElementById("latitude").value = e.point.lat;
        });
        function getPoint() {
            var city = document.getElementById("Address").value; // 初始化地图,设置城市和地图级别。
            local.search(city);    //启用滚轮放大缩小
            document.getElementById("demo").style.display = "";

        }

    </script>

三、CSS

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{850px;margin:20px auto;}
#l-map{height:400px;600px;float:left;border:1px solid #bcbcbc;}
#r-result{height:400px;230px;float:right;}
</style>