百度地图经纬度,转换为地图上的点
百度地图经纬度,转换为地图上的点
邂逅江南为伊留恋 发表于7个月前
百度地图经纬度,转换为地图上的点
  • 发表于 7个月前
  • 阅读 29
  • 收藏 0
  • 点赞 0
  • 评论 0

华为云·免费上云实践>>>   

<!doctype html>  
<html lang="en">  
<head>  
    <title>根据地址查询经纬度</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
    <script type="text/javascript" src="../js/jquery-1.12.1.min.js"></script>  
    <style>  
        a.{  
        margin-right:100px;  
        }  
    </style>  
</head>  
<body style="background:#CBE1FF">  
<div style="width:730px;margin:auto;">  
    <input class="a" type="hidden" value="金水区"/>  
    <input class="a" type="hidden" value="二七区"/>  
    <input class="a" type="hidden" value="管城区"/>  
    <input class="a" type="hidden" value="经开区"/>  
    <input class="a" type="hidden" value="金水区"/>  
    <input class="a" type="hidden" value="高新区"/>  
    <input class="a" type="hidden" value="惠济区"/>  
    <input class="a" type="hidden" value="郑东新区"/>  
    <div id="container"  
         style="position: absolute;  
                margin-top:30px;  
                width: 730px;  
                height: 590px;  
                top: 50px;  
                border: 1px solid gray;  
                overflow:hidden;">  
    </div>  
</div>  
</body>  
<script type="text/javascript">  
  
    var map = new BMap.Map("container");  
    var point = new BMap.Point(113.48722, 23.187232);  
    map.centerAndZoom(point, 13);  
    var localSearch = new BMap.LocalSearch(map);  
    localSearch.enableAutoViewport(); //允许自动调节窗体大小  
  
    map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用  
    map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用  
  
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件  
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件  
    map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));   //右下角,打开  
    var pointArray = [];//创建数组接收转化后的多个坐标值  
    var keyword = [];//从页面获取到的需要转化的地址  
    var keywordVal;  
    $(".a").each(function (i) {//从页面获取多个地址并且存放在shuzuzhong  
        keywordVal = $(".a").eq(i).val();  
        keyword.push(keywordVal);  
        searchByStationName();  
    });  
* console.info(keyword); */  
var markerArray = [];  
function searchByStationName(keywordVal) {  
map.clearOverlays();// 清空原来的标注  
localSearch.search(keywordVal);  
localSearch.setSearchCompleteCallback(function(searchResult) {  
var poi = searchResult.getPoi(0);  
map.centerAndZoom("郑州", 13);  
var longitude = poi.point.lng;// 经度  
var latitude = poi.point.lat;// 纬度  
var pointVal = new BMap.Point(longitude, latitude);  
pointArray.push(pointVal);  
var marker = new BMap.Marker(pointVal);  
markerArray.push(marker);  
// 创建标注,为要查询的地方对应的经纬度  
map.addOverlay(marker);  
//在页面上展示出当前位置信息  
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>"+ searchResult.keyword + "</p>");  
marker.addEventListener("click", function() {  
this.openInfoWindow(infoWindow);  
});  
marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画  
  });  
}  
console.info(pointArray);</script></html>

百度地图经纬度转换为地图上的点

共有 人打赏支持
粉丝 0
博文 6
码字总数 1721
×
邂逅江南为伊留恋
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: