jQuery根据地址获取经纬度
一、HTML部分
1 @*景区位置*@
2 <tr>
3 <th>景区名称:</th>
4 <td><input class="txt br2" name="ScenicSpotName" id="ScenicSpotName" type="text" size="30" value="@Model.ScenicSpotName" required></td>
5 </tr>
6 <tr class="IsType1Show">
7 <th>景区地址:</th>
8 <td>
9 <select class="text" id="province" name="province" data-value="@Model.Province"></select>
10 <select class="text" id="city" name="city" data-value="@Model.City"></select>
11 <select id="area" name="area" data-value="@Model.Area"></select>
12 <div id="show"></div>
13
14 @*<select name="Province" id="Province" onchange="provincechange(this.selectedIndex)"><option>@(Model.Province == null ? "请选择省份" : Model.Province)</option></select>
15 <select name="City" id="City" onchange="citychange(this.selectedIndex)"><option>@(Model.City == null ? "请选择城市" : Model.City)</option></select>
16 <select name="Area" id="Area"><option>@(Model.Area == null ? "请选择区" : Model.Area)</option></select>
17
18 <input class="txt br2" name="ProvinceSelected" id="ProvinceSelected" type="text" size="30" value="@Model.Province" hidden>
19 <input class="txt br2" name="CitySelected" id="CitySelected" type="text" size="30" value="@Model.City" hidden>
20 <input class="txt br2" name="AreaSelected" id="AreaSelected" type="text" size="30" value="@Model.Area" hidden>*@
21 </td>
22 </tr>
23 <tr class="IsType1Show">
24 <th><b>景点详细地址:</b></th>
25 <td>
26 <input class="txt br2" name="Address" id="Address" type="text" size="60" placeholder="街道或景区名称" value="@Model.Address" required>
27 <input type="button" style="height:30px;background-color:#ebebeb;border:1px solid #bcbcbc" onclick="getPoint()" value="生成景区经纬度" />
28 </td>
29 </tr>
30 <tr class="IsType1Show">
31 <th>景点经度:</th>
32 <td><input class="txt br2" name="longitude" id="longitude" type="text" size="30" value="@Model.longitude" required></td>
33 </tr>
34
35
36 <tr class="IsType1Show">
37 <th>景点纬度:</th>
38 <td><input class="txt br2" name="latitude" id="latitude" type="text" size="30" value="@Model.latitude" required></td>
39 </tr>
40
41 @*地图*@
42 <tr class="demo IsType1Show" id="demo" style="display:none;">
43 <th></th>
44 <td id="l-map" style="display:inline;"></td>
45 <td id="r-result" style="float:left;display:inline;"></td>
46 </tr>
二、JS部分
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
1 <script type="text/javascript">
2 // 百度地图API功能
3 var map = new BMap.Map("l-map"); // 创建Map实例
4 map.centerAndZoom(new BMap.Point(120.143814, 30.291648), 10);
5 map.enableScrollWheelZoom();
6 var local = new BMap.LocalSearch("全国", {
7 renderOptions: {
8 map: map,
9 panel: "r-result",
10 autoViewport: true,
11 selectFirstResult: false
12 }
13 });
14 map.addEventListener("click", function (e) {
15
16 document.getElementById("longitude").value = e.point.lng;
17 document.getElementById("latitude").value = e.point.lat;
18 });
19 function getPoint() {
20 var city = document.getElementById("Address").value; // 初始化地图,设置城市和地图级别。
21 local.search(city); //启用滚轮放大缩小
22 document.getElementById("demo").style.display = "";
23
24 }
25
26 </script>
三、CSS
1 <style type="text/css">
2 *{margin:0;padding:0;list-style-type:none;}
3 a,img{border:0;}
4 body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
5 .demo{width:850px;margin:20px auto;}
6 #l-map{height:400px;width:600px;float:left;border:1px solid #bcbcbc;}
7 #r-result{height:400px;width:230px;float:right;}
8 </style>
jQuery根据地址获取经纬度的更多相关文章
- jQuery通过地址获取经纬度demo
在开始之前,首先需要登录百度地图API控制台申请密钥ak. 1.登录百度地图开放平台http://lbsyun.baidu.com 注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用 ...
- 百度地图api根据地址获取经纬度
package com.haiyisoft.cAssistant;import java.io.BufferedReader;import java.io.IOException; import ja ...
- 利用百度API(js),怎样通过地址获取经纬度
根据经纬度找到具体地址:http://api.map.baidu.com/geocoder?location=纬度,经度&output=输出格式类型&key=用户密钥如:http:// ...
- JS 通过选择百度地图地址获取经纬度自动填充到文本框中的方法
首先要注册百度地图API. 1.登录百度地图开放平台http://lbsyun.baidu.com 注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用. 应用类型选择:“浏览器端”, ...
- 利用百度API(js),通过地址获取经纬度的注意事项
网上给的很多答案都是这种: http://api.map.baidu.com/geocoder?address=地址&output=输出格式类型&key=用户密钥&city=城 ...
- Java 通过地址获取经纬度 - 高德地图
一.添加依赖 <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-v ...
- Python 根据地址获取经纬度
方法一: 使用Geopy包 : https://github.com/geopy/geopy (仅能精确到城镇,具体街道无结果返回) from geopy.geocoders import Nom ...
- Python 根据地址获取经纬度及求距离
方法一: 使用Geopy包 : https://github.com/geopy/geopy (仅能精确到城镇,具体街道无结果返回) from geopy.geocoders import Nom ...
- Android Google Maps API 网络服务用于网络定位、计算路线、获取经纬度、获取详细地址等
extends:http://blog.csdn.net/h7870181/article/details/12505883 Google Maps API 网络服务 官网地址 : https://d ...
随机推荐
- netty系列之:在netty中处理CORS
目录 简介 服务端的CORS配置 CorsConfigBuilder CorsHandler netty对cors的支持 总结 简介 CORS的全称是跨域资源共享,他是一个基于HTTP-header检 ...
- 【敏捷0】敏捷项目管理-为什么从敏捷开始?为什么从PMI-ACP开始?
作为敏捷项目管理的开篇文章,还是先来简单地说一说为什么先从敏捷开始,为什么是以 PMI-ACP 为参考.当然,这一系列的文章可能不可避免地会为 PMI-ACP 做一些广告,但是我想告诉大家的是,敏捷以 ...
- JDBC-2(CRUD)
3.PreparedStatement实现CRUD 3.1 操作和访问数据库 数据库连接被用于向数据库服务器发送命令和SQL语句,接受数据库服务器返回的结果.(一个数据库连接就是也给Socket连接) ...
- javascript 享元模式 flyweight
* 适应条件 ** 一个程序中使用了大量的相似对象 造成大的内存开销 ** 对象的大多数状态都可以变为外部状态 ** 剥离出对象的外部状态之后, 可以使用相对较少的共享对象取代大量对象 * 上传文件的 ...
- css颜色字符串转换, 字符串转化为驼峰形式
* 将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffff1. rgb 中每个 , 后面的空格数量不固定2. 十六进制表达式使用六位小写字母3. 如 ...
- php-抽象工厂
目标:创建有依赖关系的实例;(套餐) <?php //抽象类 食物 interface IAllayFood { function Allay(); } interface IDrinkFood ...
- openldap 双主模式部署
规划两台机器 系统版本centos7.5 master1上部署ldap: 一.安装启动openldap软件 yum -y install openldap compat-openldap openld ...
- linux 上添加多个jdk
1. 首先将你需要上传的jdk 上传并解压 2.你可以自定义解压的路径 3. alternatives --install /usr/bin/java java /usr/java/jdk1.7.0_ ...
- 『Python』matplotlib常用图表
这里简要介绍几种统计图形的绘制方法,其他更多图形可以去matplotlib找examples魔改 1. 柱状图 柱状图主要是应用在定性数据的可视化场景中,或是离散数据类型的分布展示.例如,一个本科班级 ...
- Java面向对象/面向过程
面向过程 第一步做啥 第二部做啥 依此类推 层层递进 比如要弄一辆自行车 面向过程 搞车轮子 车链子 一步步来 如果有个地方坏了 说不定整个车都要拆了重新弄 扩展性很差 维护性也很差 速度比较快 面向 ...