高德地图纯js和html
<!doctype html>
<html>
<head>
<meta content="" charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<title>基本地图展示</title>
<!-- 地图的css及js，不可缺少-->
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0" />
<script type="text/javascript" src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=f034871b532a7bfb2d93f18e915b322c&plugin=AMap.DistrictSearch"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<!-- 弹出信息框样式-->
<style type="text/css">
.info-title {
color: white;
font-size: 14px;
background-color: blue;
line-height: 26px;
padding: 0px 0 0 6px;
font-weight: lighter;
letter-spacing: 1px;
} .info-content {
font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
padding: 4px;
color: #666666;
line-height: 23px;
} .info-content img {
float: left;
margin: 3px;
} #tip {
background-color: #fff;
padding: 0 10px;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
position: absolute;
font-size: 12px;
right: 10px;
top: 5px;
border-radius: 3px;
line-height: 36px;
}
</style>
</head>
<body onload="mapInit()">
<div id="container">
</div>
<div class="button-group" style="*position:absolute;top:90%;left:20%;text-align:center;">
<input type="button" class="button" value="添加" onclick="addMarker();" />
<!--<input type="button" class="button" value="更新站点" id="updateMarker()" />-->
<input type="button" class="button" value="删除" onclick="deleteMarker()" />
</div>
<!--var MM = new csMenu(document.getElementById("container"), document.getElementById("Menu1"));
<div id="Menu1" style="background-color:White; border:1px solid #cccccc; padding:10px;">
<li>打开</li>
<li>打印</li>
<li>回复发件人</li>
<li>全部回复</li>
<li>转发</li>
<li>分配</li>
<li>垃圾邮件</li>
<li>删除</li>
<li>归档此邮件</li>
<li>分拣此邮件</li>
</div>
/////////////////////////////////////////////////////-->
<script type="text/javascript">
function csMenu(_object, _menu) {
this.IEventHander = null;
this.IFrameHander = null;
this.IContextMenuHander = null; this.Show = function (_menu) {
var e = window.event || event;
if (e.button == 2) {
if (window.document.all) {
this.IContextMenuHander = function () { return false; };
document.attachEvent("oncontextmenu", this.IContextMenuHander);
}
else {
this.IContextMenuHander = document.oncontextmenu;
document.oncontextmenu = function () { return false; };
} window.csMenu$Object = this;
this.IEventHander = function () { window.csMenu$Object.Hide(_menu); }; if (window.document.all)
document.attachEvent("onmousedown", this.IEventHander);
else
document.addEventListener("mousedown", this.IEventHander, false); _menu.style.left = e.clientX;
_menu.style.top = e.clientY;
_menu.style.display = ""; if (this.IFrameHander) {
var _iframe = document.getElementById(this.IFrameHander);
_iframe.style.left = e.clientX;
_iframe.style.top = e.clientY;
_iframe.style.height = _menu.offsetHeight;
_iframe.style.width = _menu.offsetWidth;
_iframe.style.display = "";
}
}
}; this.Hide = function (_menu) {
var e = window.event || event;
var _element = e.srcElement;
do {
if (_element == _menu) {
return false;
}
}
while ((_element = _element.offsetParent)); if (window.document.all)
document.detachEvent("on" + e.type, this.IEventHander);
else
document.removeEventListener(e.type, this.IEventHander, false); if (this.IFrameHander) {
var _iframe = document.getElementById(this.IFrameHander);
_iframe.style.display = "none";
} _menu.style.display = "none"; if (window.document.all)
document.detachEvent("oncontextmenu", this.IContextMenuHander);
else
document.oncontextmenu = this.IContextMenuHander;
}; this.initialize = function (_object, _menu) {
window._csMenu$Object = this;
var _eventHander = function () { window._csMenu$Object.Show(_menu); }; _menu.style.position = "absolute";
_menu.style.display = "none";
_menu.style.zIndex = "1000000"; if (window.document.all) {
var _iframe = document.createElement('iframe');
document.body.insertBefore(_iframe, document.body.firstChild);
_iframe.id = _menu.id + "_iframe";
this.IFrameHander = _iframe.id; _iframe.style.position = "absolute";
_iframe.style.display = "none";
_iframe.style.zIndex = "999999";
_iframe.style.border = "0px";
_iframe.style.height = "0px";
_iframe.style.width = "0px"; _object.attachEvent("onmouseup", _eventHander);
}
else {
_object.addEventListener("mouseup", _eventHander, false);
}
}; this.initialize(_object, _menu);
}
/////////////////////////////////////////////////
</script> <script type="text/javascript"> //添加站点
function addMarker() {
//获取经纬度
var lnglat = getlnglat();
//document.getElementById("myPageTop").style.display = "none"; //隐藏
document.getElementById("myPageTop").style.display = ""; //显示 }
//添加Marker
function AddMarkerBtn() {
//获取经纬度
var lnglat = document.getElementById("lnglat").value;
//获取站点名
var siteName = document.getElementById("siteName").value;
//获取站点负责人
var WorkerName = document.getElementById("WorkerName").value;
//获取详细地址
var DeiliteAddress = document.getElementById("tipinput").value;
//定义经度
var lng = "";
//定义纬度
var lat = "";
//给经度赋值 从0开始到，结束
lng = lnglat.substr(0, lnglat.indexOf(","));
//给纬度赋值 从，后一位开始到数组的总长结束
lat = lnglat.substr(lnglat.indexOf(",") + 1, lnglat.length - 1); if (lnglat == "" || lnglat == null) {
alert("请单击地图获取坐标或输入相应地址或取坐标后重试！");
} else {
if (WorkerName != "" && siteName != "") {
window.external.addMarker(siteName, WorkerName, lng, lat, DeiliteAddress); //getDebugPath()为c#方法
document.getElementById("myPageTop").style.display = "none"; //隐藏 } else {
alert("请填写相关数据！");
}
} }
//隐藏窗体
function ColseaddMarkerWindow() {
document.getElementById("myPageTop").style.display = "none"; //隐藏
}
//获取单击的点的经纬度
function clearMarker(e) { //获取到单击的点坐标
var lat = e.target.getPosition();
//把坐标存入全局变量
getlnglatPoint = lat; }
//删除点
function deleteMarker() {
//取全局变量的经纬度值
var lnglat = getlnglatPoint;
//转换成字符串
lnglat = lnglat + "";
//定义经度
var lng = "";
//定义纬度
var lat = "";
//给经度赋值 从0开始到，结束
lng = lnglat.substr(0, lnglat.indexOf(","));
//给纬度赋值 从，后一位开始到数组的总长结束
lat = lnglat.substr(lnglat.indexOf(",") + 1, lnglat.length - 1); if (lnglat == "" || typeof (lnglat) == null) {
alert("请选择一个点！");
} else {
//调用后台方法，进行删除
window.external.deleteMarker(lng, lat); //getDebugPath()为c#方法
}
}
//刷新页面
function updateMarker() {
window.external.FindUserMobilephone();
} //全局变量，存储经纬度
var getlnglatPoint = ""; //获取参数说明， 定义一个变量，调用GetQueryString("传入参数名");方法即可，返回的是一个数组 //------------------------------------------------------------------------------------------------接收参数
//获取经纬度
var arrdes = GetQueryString("lnglat");
//获取站点名称
var siteName = GetQueryString("siteNaem");
//站点负责人
var WorkerName = GetQueryString("WorkerName");
//获取站点具体地址
var FullName = GetQueryString("FullName"); //获取Url参数值，传入参数名即可,返回的是一个数组
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
var value = unescape(r[2]);
//去掉最后一个字符，是一个，号
value = value.substr(0, value.length - 1); //定义一个数组来存放传过来的所有参数
var Arrvalue = [];
//给arrdes赋值 string2Array方法下面有说明
Arrvalue = string2Array(value);
return Arrvalue;
} else {
return null;
}
} //将字符转换为数组的方法,去除分割标志
function string2Array(stringObj) {
stringObj = stringObj.replace(/\[([\w, ]*)\]/, "$1");
if (stringObj.indexOf("[") == 0) {// if has chinese
stringObj = stringObj.substring(1, stringObj.length - 1);
}
var arr = stringObj.split("p"); //------------ !!!!!!!!!!!!注意：分割标志p
var newArray = []; //new Array();
for (var i = 0; i < arr.length; i++) {
var arrOne = arr[i];
newArray.push(arrOne);
}
// console.log(newArray);
return newArray;
}; // 创建一个地图
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
zoom: 13, //初始化大小，从国到街为3-18
center: [126.48, 46.83] //初始化中心点，传入经纬度 }); //定义需要的地图控件，类似于实例化一个对象
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'],
//添加地图控件 若不需要，可直接删除代码
function () {
//集成了缩放、平移、定位等功能按钮在内的组合控件 界面操作集成(鼠标右键双击缩小，鼠标左键双击放大，移动，鼠标滑轮缩放)
map.addControl(new AMap.ToolBar()); //展示地图在当前层级和纬度下的比例尺 左下
map.addControl(new AMap.Scale()); //在地图右下角显示地图的缩略图 右下
map.addControl(new AMap.OverView({ isOpen: false }));//默认不打开 //实现默认图层与卫星图、实施交通图层之间切换的控 右上
//map.addControl(new AMap.MapType()); //用来获取和展示用户主机所在的经纬度位置 左下
map.addControl(new AMap.Geolocation());
}); //创建一个信息框，offset是信息框对点的偏移程度，可以调整
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
for (var i = 0, marker; i < arrdes.length; i++) { //定义经度
var lng = "";
//定义纬度
var lat = "";
//把数组里面的经纬度转换成字符串
var lnglat = arrdes[i] + "";
//给经度赋值 从0开始到，结束
lng = lnglat.substr(0, lnglat.indexOf(","));
//给纬度赋值 从，后一位开始到数组的总长结束
lat = lnglat.substr(lnglat.indexOf(',') + 1, lnglat.length - 1);
//添加一个点，
var marker = new AMap.Marker({
//点的位置，从上面赋值，直接赋数组的值是无法得到的，所有东西弄了可能有12个小时，这里占了10个小时
position: [lng, lat],
map: map //地图，就是最开始创建的地图
});
//这里的content是信息框里面的内容，可以用js拼接成想要的样式或格式
marker.content =
'<div class="info-title">名称：' + siteName[i] + '</div><div class="info-content">' +
'<img src="http://webapi.amap.com/images/amap.jpg">' +
'负责人：' + WorkerName[i] + '<br/>' +
'地址：' + FullName[i] + '</div>';
;
//添加点的单击事件
marker.on('click', markerClick);
marker.emit('click', { target: marker });
} //当单击Marker时弹出文本框
function markerClick(e) {
// alert(e.target.getPosition()); 获取点的经纬度
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
clearMarker(e);
} //自适应点分布位置，使点能够显示完全
map.setFitView(); //获取站点经纬度
function getlnglat() {
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = map.on('click', function (e) {
document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
document.getElementById("key_11").value = e.lnglat.getLng();
document.getElementById("key_12").value = e.lnglat.getLat();
geocoder2();
});
} //------------------------------------------地址编码解析 begin
var mapObj;
var result;
var marker = [];
var windowsArr = [];
function mapInit() {
mapObj = new AMap.Map('iCenter'); //默认定位：初始化加载地图时，center及level属性缺省，地图默认显示用户所在城市范围
};
var MGeocoder;
var key_11;
var key_12;
function geocoder2() { //POI搜索，关键字查询
key_11 = document.getElementById("key_11").value;
key_12 = document.getElementById("key_12").value; if (key_11 == "" || typeof (key_11) == null || typeof (key_11) == 'undefined') { alert("地图还未加载完成，无法获取相应点，请稍后...")
} var lnglatXY = new AMap.LngLat(key_11, key_12);
//document.getElementById('result').innerHTML = "您输入的是：" + key_1;
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function () {
MGeocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack2);
//逆地理编码
MGeocoder.getAddress(lnglatXY);
}); mapObj.setFitView();
} function geocoder_CallBack2(data) { //回调函数
var resultStr = "";
var address;
//返回地址描述
address = data.regeocode.formattedAddress;
//返回周边道路信息 //返回结果拼接输出
resultStr = "<div style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>：" + address + "</div>";
document.getElementById("tipinput").value = address;
document.getElementById("result").innerHTML = resultStr;
}
//------------------------------------------地址编码解析 end //---------------------------------------------右键菜单 begin var contextMenu = new AMap.ContextMenu(); //创建右键菜单
//右键放大
contextMenu.addItem("放大一级", function () {
map.zoomIn();
}, 0);
//右键缩小
contextMenu.addItem("缩小一级", function () {
map.zoomOut();
}, 1);
//右键显示全国范围
contextMenu.addItem("缩放至全国范围", function (e) {
map.setZoomAndCenter(4, [108.946609, 34.262324]);
}, 2);
//右键添加Marker站点
contextMenu.addItem("添加站点", function (e) {
addMarker(); //------------------------------------直接写方法，然后把上面的方法删了就行了
}, 3);
//右键添加Marker站点
contextMenu.addItem("删除站点", function (e) { }, 4);// ----------------------------------要添加跟多按钮的时候注意第三个参数不能重复 //地图绑定鼠标右击事件——弹出右键菜单
map.on('rightclick', function (e) {
contextMenu.open(map, e.lnglat);
contextMenuPositon = e.lnglat;
}); //---------------------------------------------右键菜单 begin </script>
<div id="myPageTop" style="display: none;">
<table>
<tr>
<td colspan="2">
<label>
<span style="color: Red">点击地图上相应位置即可添加地址及相应经纬度！</span>
</label>
</td>
</tr>
<tr>
<td>
<label>
名称：
</label>
</td>
<td class="column2">
<label>
负责人：
</label>
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="请填写养老院名称" id="siteName">
</td>
<td class="column2">
<input type="text" placeholder="请填写养老院负责人" id="WorkerName">
</td>
</tr>
<tr style="display:none">
<td>
<div id="iCenter">
</div>
<div id="result">
</div>
<div id="iControlbox"> <input type="text" id="key_11" value="126.48" />
<input type="text" id="key_12" value="46.83" />
<button onclick="javascript:geocoder2();">
逆地址解析
</button> </div>
</td>
</tr> <tr>
<td colspan="2">
<label>
经纬度(点击地图获取)：
</label>
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" readonly="true" id="lnglat" style="width:375px;">
</td>
</tr>
<tr>
<td colspan="2">
<label>
详细地址(点击地图获取地址)：
</label>
</td> </tr>
<tr> <td colspan="2">
<input type="text" placeholder="详细地址" id="tipinput" style="width:375px;">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="button" style="width: 190px; height: 20px;" value="确认添加"
onclick="AddMarkerBtn();" />
<input type="button" class="button" style="width: 190px; height: 20px;" value="关闭窗体"
onclick="ColseaddMarkerWindow();" />
</td>
</tr>
</table>
</div>
</body>
</html>
高德地图纯js和html的更多相关文章
- 【python】获取高德地图省市区县列表
项目中需要用省市区来进行检索,原想高德地图肯定会有API来获得这些数据,结果没有找到,有一个接口好像可以用,但是会附带大量的边界坐标点. 所以就不如自己把高德的省市区列表扒下来,自己写接口来完成这个功 ...
- web开发如何使用高德地图API（四）通过AMap.Marker自定义标点
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- web开发如何使用高德地图API（三）点击热点打开信息窗体
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- web开发如何使用高德地图API（二）结合输入提示和POI搜索插件
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- web开发如何使用高德地图API（一）浏览器定位
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- vue+vant ui+高德地图的选址组件
首先在index.html引入高德地图的js <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key" ...
- vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. &l ...
- 【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘
原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...
- 【高德地图API】从零开始学高德JS API（八）——地址解析与逆地址解析
原文:[高德地图API]从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理 ...
随机推荐
- 【BZOJ-2597】剪刀石头布 最小费用最大流
2597: [Wc2007]剪刀石头布 Time Limit: 20 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 1016 Solved: ...
- theano scan optimization
selected from Theano Doc Optimizing Scan performance Minimizing Scan Usage performan as much of the ...
- Sublime 插件- px 转rem
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目 https://github.com/hyb628/cssrem.git 进入packag ...
- HDU 1796How many integers can you find（容斥原理）
How many integers can you find Time Limit:5000MS Memory Limit:32768KB 64bit IO Format:%I64d ...
- spring-mvc注解(mvc:annotation-driver,JSON,配置详解)
一.DefaultAnnotationHandlerMapping 和 AnnotationMethodHandlerAdapter 的使用已经过时! spring 3.1 开始我们应该用 Reque ...
- python版本随意切换之python2.7+django1.8.7+uwsgi+nginx源码包部署。
资源准备: wget https://www.python.org/ftp/python/2.7.13/Python-2.7.13.tgz wget https://www.djangoproject ...
- js设置鼠标悬停改变背景色
看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: <div id="sign">this is te ...
- 分享公司Basecode的用法
主题 公司在basecode的用法上是比较有新意的,所以准备记录分享下公司的用法. 说明 basecode公司的一个主要用途就是用于一些基础的代码表,参数表的前台操作.这些表有很多,用spring d ...
- ump_player在线直播播放器
ump_player在线直播播放器封装,可以支持加载在线直播流 https://github.com/Mrxdh/EveryExercise/blob/master/ump_player%E5%9 ...
- [Storm] No data flows into bolt
最近在HDP2.1的HBase环境中安装了一个Storm测试机器(单节点,JDK8),遇到了几个问题,记录下来. 尝试步骤 1. 使用和HBase一样HDP版本,直接安装Storm yum insta ...