您的位置：首页 > 其它

百度地图API接口地图标注地址经纬度解析

2016-05-10 12:34 651 查看

先看代码：

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}

#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}

#r-result{height:100%;width:20%;float:left;}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=（此处需要提供有效的百度LBS开放平台密钥，可到百度地图开放平台申请JavaScriptAPI授权）"></script>

<title>单击获取点击的经纬度</title>

</head>

<body>

<div>

  城市：

  <input type="text" id="city" name="city" value="上海">

  地图级别：

  <input type="text" id="zoom" name="zoom" value="15">

  <input type="button" id="b1" name="查询" value="城市查询" onclick="searchPoint()">（选择的城市、地图级别，地图拉到所关注的区域，点击地图上某个点，数据显示在经纬度文本框中）

</div>

<div>

  经度：

  <input type="text" id="lng" name="lng" >

  纬度：

  <input type="text" id="lat" name="lat" >

  <input type="button" id="b2" name="bz" value="地图标注" onclick="markPoint()">（输入经纬度在地图上显示）

</div>

<div>

  地址：

  <input type="text" id="addr" name="addr" size="60">

  <input type="button" id="b23" name="bza" value="地址解析" onclick="locationPoint()">

</div>

<div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

// 创建Map实例

var map = new BMap.Map("allmap");

// 初始化地图,设置城市和地图级别。

map.centerAndZoom("上海", 15);

// 启用滚轮放大缩小，默认禁用

map.enableScrollWheelZoom();

// 启用地图惯性拖拽，默认禁用

map.enableContinuousZoom();

// 添加比例尺控件

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

// 添加缩略地图控件

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

// 添加默认缩放平移控件

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

var marker;

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

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

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

var locPoint = new BMap.Point(document.getElementById("lng").value, document.getElementById("lat").value);

if (marker)

  map.removeOverlay(marker);

marker = new BMap.Marker(locPoint);

map.addOverlay(marker);

alert(e.point.lng + "," + e.point.lat);

map.centerAndZoom(locPoint, 15);

});

function searchPoint() {

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

var newZoom = document.getElementById("zoom").value;

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

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

map.centerAndZoom(newCity, newZoom);

}

function markPoint() {

var locPoint = new BMap.Point(document.getElementById("lng").value, document.getElementById("lat").value);

if (marker)

  map.removeOverlay(marker);

marker = new BMap.Marker(locPoint);

map.addOverlay(marker);

map.centerAndZoom(locPoint, 14);

}

function locationPoint() {

var myGeo = new BMap.Geocoder();

myGeo.getPoint(document.getElementById("addr").value, function(point){

  if(point){

   document.getElementById("lng").value = point.lng;

   document.getElementById("lat").value = point.lat;

   map.centerAndZoom(point, 14);

   if (marker)

    map.removeOverlay(marker);

   marker = new BMap.Marker(point);

   map.addOverlay(marker);

  }

});

}

</script>

解释：

1、百度开放平台在线实例DEMO:http://developer.baidu.com/map/jsdemo.htm#a1_2

2、HEAD部分调用JavaScriptAPI处，需要将”ak=“后的内容替换为有效的百度LBS开放平台密钥。如ak=123456789

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 百度地图 api 经纬度解析

相关文章推荐

新的分享

章节导航

百度地图API接口 地图标注 地址经纬度解析

百度地图API接口地图标注地址经纬度解析