一、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根据地址获取经纬度的更多相关文章

  1. jQuery通过地址获取经纬度demo

    在开始之前,首先需要登录百度地图API控制台申请密钥ak. 1.登录百度地图开放平台http://lbsyun.baidu.com 注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用 ...

  2. 百度地图api根据地址获取经纬度

    package com.haiyisoft.cAssistant;import java.io.BufferedReader;import java.io.IOException; import ja ...

  3. 利用百度API(js),怎样通过地址获取经纬度

    根据经纬度找到具体地址:http://api.map.baidu.com/geocoder?location=纬度,经度&output=输出格式类型&key=用户密钥如:http:// ...

  4. JS 通过选择百度地图地址获取经纬度自动填充到文本框中的方法

    首先要注册百度地图API. 1.登录百度地图开放平台http://lbsyun.baidu.com 注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用. 应用类型选择:“浏览器端”, ...

  5. 利用百度API(js),通过地址获取经纬度的注意事项

    网上给的很多答案都是这种: http://api.map.baidu.com/geocoder?address=地址&output=输出格式类型&key=用户密钥&city=城 ...

  6. Java 通过地址获取经纬度 - 高德地图

    一.添加依赖 <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-v ...

  7. Python 根据地址获取经纬度

    方法一: 使用Geopy包 : https://github.com/geopy/geopy   (仅能精确到城镇,具体街道无结果返回) from geopy.geocoders import Nom ...

  8. Python 根据地址获取经纬度及求距离

    方法一: 使用Geopy包 : https://github.com/geopy/geopy   (仅能精确到城镇,具体街道无结果返回) from geopy.geocoders import Nom ...

  9. Android Google Maps API 网络服务用于网络定位、计算路线、获取经纬度、获取详细地址等

    extends:http://blog.csdn.net/h7870181/article/details/12505883 Google Maps API 网络服务 官网地址 : https://d ...

随机推荐

  1. 逐条更新数据 sql

    declare @tid int        declare @fid int declare @i int declare @j int set @j=(select count(*) from ...

  2. 模板引挚 jade ejs

    // asl sum翡翠 后台使用如下: const jade = require('jade') //pretty 美化的意思,指的是渲染的布局会美化   2020-2-15 var str = j ...

  3. Spring Boot 2.x 之 H2 数据库

    1. Spring Boot下H2数据库的常用配置项 # 指定数据库的类型 spring.datasource.platform=h2 # 数据库连接地址(文件模式) ## AUTO_SERVER=T ...

  4. PHP密码散列算法的学习

    不知道大家有没有看过 Laravel 的源码.在 Laravel 源码中,对于用户密码的加密,使用的是 password_hash() 这个函数.这个函数是属于 PHP 密码散列算法扩展中所包含的函数 ...

  5. PHP获取当前网址路径

    $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] // 获取来源 function ...

  6. DEDECMS首页循环调用一级栏目和二级栏目的实现方法

    调用方法: {dede:channelartlist typeid='2'} <li class="First"><a href="{dede:fiel ...

  7. spring Data Jpa的依赖+配置

    spring data jpa 是spring基于的orm框架,jpa规范的基础上封装的一套JPA应用框架 添加的相关依赖: <properties> <spring.version ...

  8. P2490-[SDOI2011]黑白棋【博弈论,dp】

    正题 题目链接:https://www.luogu.com.cn/problem/P2490 题目大意 一个长度为\(n\)的棋盘上放下\(k\)个棋子. 第一个要是白色,下一个要是黑色,在下一个是白 ...

  9. 智汀家庭云-开发指南Golang:设备插件开发

    设备插件模块 开发前先阅读插件设计概要:智汀家庭云-开发指南Golang: 插件模块 使用 plugin-sdk 可以忽略不重要的逻辑,快速实现插件 插件实现 获取sdk go get github. ...

  10. Spring技术内幕笔记2--我懒不写了哈哈哈哈。

    目录 1.1 关于IOC容器设计的线路区别 1.1.1 BeanFactory 1.1.2 ApplicationContext 2.1 FileSystemXmlApplicationContext ...