技术标签： 地图 html5 html javascript jquery
<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=90ce9e1460c8a0ba99d020ed73831cef"></script>
<style type="text/css">
#tip {
background-color: #ddf;
color: #333;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
position: absolute;
top: 170px;
right: 400px;
border-radius: 5px;
overflow: hidden;
line-height: 20px;
}
#tip input[type="text"] {
height: 25px;
border: 0;
padding-left: 5px;
width: 280px;
border-radius: 3px;
outline: none;
}
</style>
<body class="white-bg">
<head th:include="include :: header"></head>
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-map-add">
<div class="form-group">
<label class="col-sm-2 control-label">拜访坐标：</label>
<div class="col-sm-8">
<input name="location" id="location" class="form-control" readonly/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">拜访位置：</label>
<div class="col-sm-8">
<input name="address" id="address" class="form-control" readonly/>
</div>
</div>
</form>
</div>
<div id="container" style="width:1100px; height: 420px;"></div>
<div id="tip"><input type="text" id="searchValue" name="searchValue" value="请输入关键字：(选定后搜索)" οnfοcus='this.value=""'/></div>
<div th:include="include::footer"></div>
<script type="text/javascript">
var geocoder;
var marker;
//加载地图
var map = new AMap.Map('container', {
center: [117.214005, 39.084843],
zoom: 12
});
// 实例化点标记
function addMarker() {
marker = new AMap.Marker({
position: [117.2216800000,39.1042110000],
});
marker.setMap(map);
}
addMarker()
//地图工具
map.plugin('AMap.ToolBar', function () {//异步加载插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
});
AMap.plugin(['AMap.Geocoder', 'AMap.ToolBar'], function () {
var ar = {
city: "010", //城市设为北京，默认：“全国”
radius: 1000 //范围，默认：500
};
geocoder = new AMap.Geocoder(ar);
map.addControl(geocoder);
});
//搜索框下拉筛选
AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.PlaceSearchRender'], function () {
//输入提示
var autoOptions = {
input: "searchValue"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
});
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
var keyName = "";
function select(e) {
console.log(e);
keyName = e.poi.name;
placeSearch.setPageSize(10);
placeSearch.setCity(e.poi.adcode);
placeSearch.search(keyName, callback);
}
function callback(status, result) {
console.log(status, result);
if (status === 'complete' && result.info === 'OK') {
var placeSearchRender = new AMap.PlaceSearchRender();
placeSearchRender.autoRender({
placeSearchInstance: placeSearch,
methodName: "search",
methodArgumments: [keyName, callback],
data: result,
map: map,
panel: "panel"
});
}
}
}
);
//点击标记
map.on('click', function (e) {
//删除上一次标记
if (marker) {
marker.setMap(null);
marker = null;
}
//经纬度
$('#location').val(e.lnglat.getLng() + ',' + e.lnglat.getLat());
//标记地址
geocoder.getAddress(e.lnglat, function (status, result) {
if (status === 'complete') {
var address = result.regeocode.formattedAddress;
$('#address').val(address);
var mark = {
map: map,
bubble: true
};
marker = new AMap.Marker(mark);
marker.setPosition(e.lnglat);
marker.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label
offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
content: result.regeocode.formattedAddress
});
} else {
$('#address').val(status);
}
});
});
</script>
<div th:include="include::footer"></div>
</body>
</html>
本Java视频教程涵盖JavaWEB 企业级开发所需的Servlet、JSP、MVC 设计模式、EL 表达式、JavaBean、国际化、Cookie和HttpSession、JavaMail等全部核心技术。 授课过程中通过多个企业级案例，将各知识点融会贯通。...
一、概述虽然前端系统对后台API接口调用之前都会做数据的校验，但是考虑到很多API接口是直接暴露在外网中，后台接口对传入的参数做校验是不可缺少的。比如判断字段非空，字段长度限制，邮箱格式验证等，这时就可以用到Validation。二、创建Spring Boot工程三、创建类3.1 UserVo类package com.anron.vo;import lomb...
原文地址：http://android.xsoftlab.net/training/articles/security-tips.htmlAndroid系统内置的安全策略可以有效的降低应用程序的安全问题。所以默认创建的应用程序已经包含了一定程度的安全保护措施。Android所包含的安全策略有：应用程序沙箱，它可以使APP的数据、代码与其它APP相互隔离。应用程序框架对于常见防护措施
The Mishti Notebook is a project close to my heart, wherein I experimented with screen printing techniques at the Print Labs at the National Institute of Design, Ahmedabad. Dating back to the year 201...
Python实战社群Java实战社群长按识别下方二维码，按需求添加扫码关注添加客服进Python社群▲扫码关注添加客服进Java社群▲作者丨大飞码字来源丨大飞码字（BigFly1024）...
通过本节的学习可以得到如下的效果将一个低模的模型通过渲染管线的曲面细分功能得到一个高模的结果当我们开启渲染管线的tessellation开关时，我们传统意义上的顶点着色器功能就发生了改变。因为此时我们提交给IA阶段的内容不再被看作是有三个顶点(vertex)的三角面(triangle)(因为经过曲面细分之后才是三角面)，而是看作一个有三个控制点(control point)的片(patch)。这里的控制点，可以理解成贝塞尔曲线的控制点或者PhotoShop钢笔工具的控制点，是控制点组成了这
DFS(深度优先搜索)和 BFS(广度优先搜索)就像孪生兄弟，提到一个总是想起另一个。然而在实际使用中，我们用 DFS 的时候远远多于 BFS。那么，是不是 BFS 就没有什么用呢？如果我们使用 DFS/BFS 只是为了遍历一棵树、一张图上的所有结点的话，那么 DFS 和 BFS 的能力没什么差别，我们当然更倾向于更方便写、空间复杂度更低的 DFS 遍历。不过，某些使用场景是 DFS 做...
Description在一个有180人的大班级中，存在两个人生日相同的概率非常大，现给出每个学生的学号，出生月日。试找出所有生日相同的学生。Input第一行为整数n，表示有n个学生，n此后每行包含一个字符串和两个整数，分别表示学生的学号（字符串长度小于10）和出生月(1学号、月、日之间用一个空格分隔。Output对每组生日相同的学生，输出一行
MapVGL，是一款基于WebGL的地理信息可视化库,是一款基于百度地图的大数据可视化开源库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。百度地图有很多强大的功能，如图片叠加、瓦片数据加载，模型加载，各类覆盖物等等，我们看见到许多漂亮的可视化系统，都少不了百度地图、还有百度的相关js类库echart等等，今天闲来无事，利用百度mapv实现三维公交线路的实时查看跟踪，路线轨迹回放、绘制站点名称。主要步骤抓取百度公交线路。
前言分页加表格很常见，基本实现：前台分页和后台分页。这里讲一下如何实现前台分页及搜索功能。基于vue和element，demo详见最后。正文页面布局<template> <div> <el-row> <el-col :span="6"> <el-inp...
为什么80%的码农都做不了架构师？>>> ...
这个blog，我整理了我之前写的MySQL开发系列和MySQL运维系列，知识丰富程度堪比培训机构个人能力有限，如有错误的地方，欢迎指正。文章目录一.MySQL开发系列1.1 MySQL 行转列1.2 MySQL 常用的函数1.3 MySQL 表连接1.4 MySQL分组语句小结1.5 MySQL with语句1.6 MySQL高级窗口函数1.7 MySQL正则表达式1.8 MySQL编程二.MySQL运维系列2.1 MySQL安装2.2 MySQL体系结构2.3 MYSQL启动和关闭2.4 MySQL配