凨-百度地图API之地图标注(JS版)，地理位置信息，根据地址获取经度纬度

使用的时候记得更改百度地图的开发者KEY

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>凨-百度地图API之地图标注(JS版)，地理位置信息，根据地址获取经度纬度</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8277432c34c6f58ba75d3a541ed2559e"></script>
</head>
<body>
<div><p>搜索:<input id="keyword" type="text" size="50"/> <input id="Search" type="button" value="搜索"style="cursor: pointer"/></p><p> 纬度：<input name="lng" type="text" id="lng" style="width:200px;" value="120.570464"/>经度：<input name="lat" type="text" id="lat" style="width:200px;" value="31.300216"/>标注点所在区域：<input name="address" type="text" id="address" style="width:200px;"/></p>
</div>
<div style="width: 420px; height: 340px; border: 1px solid gray; float: left;" id="container">
</div>
<div style="width: 350px; height: 340px;"><input id="biao" type="button" value="标注" style="cursor: pointer"/>
</div>
<script type="text/javascript">var map = new BMap.Map("container");//创建地址解析的实例var myGeo = new BMap.Geocoder();var lng = $('#lng').val(), lat = $('#lat').val();//默认根据IP读取当前城市var LocalCity = true;//默认北京市,或经度纬度不正确情况下if (!lng || !lat) {lng = 116.331398;lat = 39.897445;} else {LocalCity = false;}//设置地图中心坐标map.centerAndZoom(new BMap.Point(lng, lat), 12);//添加默认缩放平移控件map.addControl(new BMap.NavigationControl());//开启缩小放大map.enableScrollWheelZoom();//当前城市if (LocalCity) {var myCity = new BMap.LocalCity();myCity.get(setCenter);}else{//设置覆盖物var point = new BMap.Point(lng, lat);setPoint(point);}//搜索$('#Search').bind('click', function () {//清空覆盖物map.clearOverlays();var searchTxt = $("#keyword").val();myGeo.getPoint(searchTxt, function (point) {setPoint(point);}, "全国");});//搜索$('#biao').bind('click', function () {//清空覆盖物map.clearOverlays();var center = map.getCenter();var point = new BMap.Point(center.lng, center.lat);setPoint(point);});/*** 回调函数*/function setCenter(result) {var cityName = result.name;//把地图设置当前城市map.setCenter(cityName);}/*** 设置覆盖物，获取坐标* @param point*/function setPoint(point) {if (point) {//坐标赋值$('#lng').val(point.lng);$('#lat').val(point.lat);Geocoder(point);map.centerAndZoom(point, 12);var marker = new BMap.Marker(point);map.addOverlay(marker);marker.enableDragging();//可以拖动//创建信息窗口var infoWindow = new BMap.InfoWindow("这就是您公司的位置。<br/>如果不正确，请拖动红色图标");//显示窗口marker.openInfoWindow(infoWindow);//点击监听marker.addEventListener("click", function () {this.openInfoWindow(infoWindow);});//拖动监听marker.addEventListener("dragend", function (e) {//坐标赋值$('#lng').val(e.point.lng);$('#lat').val(e.point.lat);Geocoder(e.point);});}}/*** 根据坐标获取地址* @param point* @constructor*/function Geocoder(point) {var gc = new BMap.Geocoder();gc.getLocation(point, function (rs) {var addComp = rs.addressComponents;$('#address').val(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);});}</script>
</body>
</html>

凨-百度地图API之地图标注(JS版)，地理位置信息，根据地址获取经度纬度相关推荐

高德h5地图api接口_H5，JS中使用微信、高德获取定位
目的: --:展示游戏玩家彼此之间的距离,防止棋牌游戏中用户作弊经过: 1:在微信公众号,配置对应的JS域名,IP地址白名单 2:在JS页面中,调用微信的JS-SDK,来使用微信的getLocati ...
百度地图api 点击标注后跳转页面
百度地图api 点击标注跳转页面初始化地图 window.onload = function(){//得到所有点,包括点的id.经纬度.跳转地址链接//jd. wd.hrefgetPoints(); ...
【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？
原文:[百度地图API]如何调整结果面板的样式?如何获取指定页码的结果? 摘要: 1.你是否想自定义查询后,结果面板的显示样式? 2.数据接口每次只返回10条结果,如何取到单独每一页的结果? ---- ...
php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
各系地图坐标互相转换【JS版和Java版】
各系地图坐标互相转换[JS版和Java版] 坐标说明 1.(地球坐标)美国GPS使用的是WGS84的坐标系统,以经纬度的形式来表示地球平面上的某一个位置. 2.(火星坐标)我国,出于国家安全考虑,国内 ...
python + 高德地图API实现地图找房
python + 高德地图API实现地图找房项目简介:根据工作地点信息和58同城爬取的租房信息,通过高德地图进行显示,同时利用高德API自动规划房源到工作地点的通勤路线(公交+地铁) 项目仓库:ht ...
腾讯地图调用获取经度纬度代码
腾讯地图调用获取经度纬度代码 //腾讯地图拼接好的数据返回经度和纬度 function getPositionInfo($address) { header("Content-type:te ...
Vue由本地js中存放的url地址获取图片
Vue由本地js中存放的url地址获取图片对象必须放在js中(而不是json里面,json没有require).如果是在json中,需要采用其他方式去获取注意:url地址必须用这种形式,有requ ...
使用百度地图API实现地图生成、标记以及标注
首先你需要引入一段javaScript <script type="text/javascript" src="http://api.map.baidu.com/a ...
百度地图API——ico图片标注的移动
查询了很多资料,也设想过很多方案(比如让之前的标注隐藏或者删除,再显示新的标注),没有一个较为合理的实现方案.经过不懈的寻找,终于找到了一种方法,成功实现了ico图片标注的平移.记录一下,后续再用到时 ...

凨-百度地图API之地图标注(JS版)，地理位置信息，根据地址获取经度纬度

使用的时候记得更改百度地图的开发者KEY

凨-百度地图API之地图标注(JS版)，地理位置信息，根据地址获取经度纬度相关推荐

最新文章

热门文章