可实现右键点位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Hello, world</title>
<style type="text/css">
html { height:100% }
body { height:100%; margin:0px; padding:0px }
#container { height:90%;width:90%; padding-left:10px }
</style>
<script type="text/javascript" src="http://api.amap.com/webapi/init?v=1.1"> </script>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
}
var decode = function(lnglat){
if (lnglat.indexOf(',') == -1)
{
alert("经纬度格式错误");
return {
lng: 0 ,
lat: 0
}
}else{
var s = lnglat.split(',');
return {
lng: s[0],
lat: s[1]
}
}
}
function lnglatQuery() {
$("container").innerText = "";
var lnglat = $("lnglat").value.trim();
var lng = decode(lnglat).lng;
var lat = decode(lnglat).lat;
var mapObj = new AMap.Map("container"); // 创建地图实例
mapObj.plugin(["AMap.ToolBar","AMap.OverView,AMap.Scale"], function() {
// 加载工具条
tool = new AMap.ToolBar({
direction: true, // 隐藏方向导航
ruler: false, // 隐藏视野级别控制尺
autoPosition: false // 禁止自动定位
});
mapObj.addControl(tool);
});
var marker = new AMap.Marker({
id:"m",
position: new AMap.LngLat(lng,lat),
offset: new AMap.Pixel(0,0),
icon: "http://api.amap.com/webapi/static/Images/marker_sprite.png"
});
//设置可以拖拽
marker.setDraggable(true);
//绑定marker拖拽事件
mapObj.bind(marker,"dragend",function(e){
$("lnglat").value = e.lnglat;
});
mapObj.addOverlays(marker );
mapObj.bind(mapObj,"rightclick",function(e){
var lnglat = e.lnglat;
marker.setPosition(lnglat);
$("lnglat").value = lnglat;
});
// 自定义构造AMap.Marker对象
var point = new AMap.LngLat(lng,lat); // 创建点坐标
mapObj.setCenter(point); // 设置地图中心点坐标
}
var geocoderOption = {
range:300, // 范围
crossnum:2, // 道路交叉口数
roadnum :3, // 路线记录数
poinum:1 // POI点数
};
var geocoder = new AMap.Geocoder(geocoderOption);
function mechantQuery(){
var address = $('uname').value;
geocoder.geocode(address,function(data){
var lng = data.list[0].x;
var lat = data.list[0].y;
$("lnglat").value = lng+"," + lat;
lnglatQuery();
});
}
</script>
</head>
<body>
<p>
商户名称:<input type="text" name="uname" id="uname" value="北京中关村" size="40" /> <input type="button" name="btn_uname" value="查询" onclick="mechantQuery()"/>
经纬度:<input type="text" name="lnglat" id="lnglat" value="116.404, 39.915" size="40" /> <input type="button" name="btn_lat_lng" value="查询" onclick="lnglatQuery()" />
</p>
<div id="container"></div>
</body>
</html>
分享到:
相关推荐
高德地图使用场景,定位、自定义图标、marker等,还有groundoverlay添加覆盖物,相当实用。
接口自动化测试用例模板,内容中包含ID、method、api地址、传参、期望响应结果、实际响应结果、断言结果等内容,其中method、api地址、参数、期望响应结果根据项目实际情况进行调整;实际响应结果和断言结果可以通过...
高德地图测试demo
如果没有完全理解Java库中的具有决定性的部分,你就不可能成为一个优秀的Java程序员。
Grpc和WebApi性能测试用例
libuv api 说明及用例 英文文档 但是很好理解
API接口测试用例设计表
将硬件与 Plotly 的实时图形 API 连接的工作示例和用例。
用例模版用例模版用例模版用例模版用例模版用例模版用例模版用例模版用例模版用例模版
用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档模板用例文档...
poi导出excel,excel相关格式设置用例
测试用例示例测试用例示例测试用例示例测试用例示例测试用例示例测试用例示例测试用例示例测试用例示例测试用例示例测试用例示例测试用例示例
性能测试用例性能测试用例性能测试用例性能测试用例
测试用例模板测试用例模板测试用例模板测试用例模板
软件测试用例模版【仅供参考】软件测试用例模版【仅供参考】软件测试用例模版【仅供参考】软件测试用例模版【仅供参考】软件测试用例模版【仅供参考】软件测试用例模版【仅供参考】软件测试用例模版【仅供参考】软件...
绘制用例图只是完成了用例建模最基本也是最简单的一步,用例建模的核心在于编写用例文档,用例文档又称为用例规约或用例描述。顾名思义,用例文档是用于描述用例的文档,每一个用例对应于一个用例文档,在用例文档中...
测试用例模板 测试用例 模板测试用例模板 测试用例 模板
所有服务都有一组用例,可以通过使用这些REST API来以编程方式实现。 vRealize Automation 7.1和更高版本以醒目的格式记录了这些API。 我们准备了一组API示例,以帮助加速开发人员以编程方式使用和集成vRealize ...
关于接口功能测试用例