拾取坐标-百度地图API-HDHCMS收集

<!DOCTYPE html>

<html>

<head>

<title>拾取坐标-百度地图API-HDHCMS收集</title>

body,

html {

width: 100%;

height: 100%;

margin: 0;

font-family: "微软雅黑";

font-size: 12px;

overflow: hidden;

}

#allmap {

height: 100%;

width: 100%;

overflow: hidden;

}

#r-result {

width: 100%;

font-size: 14px;

margin-top: 10px;

margin-left: 10px

}

.stepli {

background-color: #f5f6f9;

padding: 4px;

cursor: pointer;

margin: -5px;

}

.stepli:hover {

background-color: #ccc;

}

.stepcurrent {

background-color: #d7ebfb;

}

.mapli {

zoom: 1;

overflow: hidden;

padding: 0px 5px;

}

.maplititle {

line-height: 20px;

font-size: 12px;

color: #00C

}

</style>

</head>

<body>

地址: <input id="cityName" type="text" style="width:200px; margin-right:10px;" />

<input type="button" value="搜索" onclick="theLocation()" /> 经度:

<input type="text" id="lng" /> 纬度：

<button onclick="submit()">显示经纬度数据</button>

</div>

1、支持地址精确/模糊查询；<br>2、支持POI点坐标显示、复制；<br>3、坐标鼠标跟随显示；<br>4、

<font color="red">支持坐标查询(需要将坐标反查框勾选)；</font><br>

</p>

1、获取坐标并复制：<br><span class="tip_info_em">1)、在搜索框中搜索关键词后，左侧列表中会有该点的坐标，点击该条信息或地图上该点，都会将坐标显示在地图右上角的Input框中,然后点击复制按钮，该点坐标就复制成功了;<br>2)

、在地图上用鼠标左键单击地图，就能将该点坐标显示在地图右上角的Input框中,然后点击复制按钮，该点坐标就复制成功了;</span>2、坐标反查：<br>

1)、先勾选住搜索框后面的

<font color="red">坐标反查框</font><br>2)、输入一个正确的坐标(比如：116.307629,40.058359)，点击按钮 <b>百度一下</b>，就能将该点显示在地图上、切换地图，

<font color="red">如果解析成功，还能返回一个地址</font>

</span>

</p>

</div>

// 在指定容器创建地图实例并设置最大最小缩放级别

var map = new BMap.Map("allmap", {

minZoom: 5,

maxZoom: 19

});

// 初始化地图，设置中心点和显示级别

map.centerAndZoom(new BMap.Point(121.36564, 31.22611), 19);

// 开启鼠标滚轮缩放功能，仅对PC上有效

map.enableScrollWheelZoom(true);

// 将控件（平移缩放控件）添加到地图上

map.addControl(new BMap.NavigationControl());

// 为地图增加点击事件，为input赋值

map.addEventListener("click", function (e) {

document.getElementById('lat').value = e.point.lat;

document.getElementById('lng').value = e.point.lng;

});

// 创建位置检索、周边检索和范围检索

var local = new BMap.LocalSearch(map, {

renderOptions: {

map: map, autoViewport: true, panel: "map_result2"

}

//方式一自定义解析返回值填充到 div

, onSearchComplete: function (results) {

if (local.getStatus() == BMAP_STATUS_SUCCESS) {

// 获取第一条方案

//var plan = results.getPlan(0);

//// 获取方案的驾车线路

//var route = plan.getRoute(0);

//// 获取每个关键步骤，并输出到页面

var s = [];

for (var i = 0; i < results.getCurrentNumPois(); i++) {

let step = results.getPoi(i)

let html = "<div class='stepli' onclick='selectpoint(" + step.point.lng + "," + step.point.lat + ",this)' address='" + step.address + "'>";

html += "<span style='background:url(http://api.map.baidu.com/images/markers.png) -23px -" + (i * 25) + "px no-repeat;width:19px;height:25px;cursor:pointer;float:left;*zoom:1;overflow:hidden;margin:2px 3px 0

5px;*margin-right:0px;display:inline;'> </span>";

html += "<div class='mapli'><div class='maplititle'>" + step.title + "</div><div class='mapliaddress'>"

html += "地址：" + step.address + "<br>坐标：" + step.point.lng + "," + step.point.lat + "</div>";

html += "</div></div>";

s.push(html);

}

document.getElementById("map_result").innerHTML = s.join("<br>");

}

//方式二加点击事件

//, onSearchComplete:function(results){ //点击搜索面板事件

//$(document).on("click","#map_result li",function(resli){

////alert(resli.currentTarget.innerText)

//$("#cityName").val(resli.currentTarget.innerText)

//})

//}

});

// 发起检索

function theLocation() {

var city = document.getElementById("cityName").value;

if (city != "") {

local.search(city);

}

};

function selectpoint(lnt, lat, node) {

document.getElementById('lat').value = lat;

document.getElementById('lng').value = lnt;

$(".stepli").removeClass("stepcurrent");

$(node).addClass("stepcurrent");

}

// 弹出经纬度

function submit() {

var lat = document.getElementById('lat');

var lng = document.getElementById('lng');

alert("经度：" + lng.value + "\n" + "纬度：" + lat.value);

};

</script>

</body>

</html>

查看更多关于拾取坐标-百度地图API-HDHCMS收集的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did255468

更新时间：2023-10-26 阅读：66次