javascript 百度地图定位标点，定位详情

最新推荐文章于 2024-06-24 14:25:44 发布

微齐天大圣.

最新推荐文章于 2024-06-24 14:25:44 发布

阅读量2.4k

点赞数

分类专栏： js 文章标签： js 百度api接口

本文链接：https://blog.csdn.net/qq_39521804/article/details/90111942

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、先引入百度api

ak申请地址：http://lbsyun.baidu.com/apiconsole/key?application=key

以下是完整代码：

<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度申请的ak"></script><!-- 百度api -->
<body>
<div class="page-container bblack">
	<div id="allmap" style="height: 500px;"></div>
</div>

<!-- js -->
<script type="text/javascript">
    var coordinate=[
    {"id":6,"code":"6","register":1,"ywh":0,"pm":2.6,"nmhc":0,"overhaul":1555894631,"shop_name":"张杰","av":12000,"address":"四川省成都市武侯区天仁路388号","lat_lng":"25.603195,100.067223"},
    {"id":5,"code":"5","register":1,"ywh":1.8,"pm":2.5,"nmhc":0.5,"overhaul":1555894616,"shop_name":"王大大","av":8000,"address":"深圳PHP","lat_lng":"23.746359,113.908356"},
    {"id":4,"code":"4","register":1,"ywh":4.7,"pm":2.6,"nmhc":1.8,"overhaul":1555894602,"shop_name":"万里长征出发地","av":12000,"address":"江西省赣州市瑞金","lat_lng":"22.798552,113.905192"}
    ],coordinatea=[];

    for(var i=0;i<coordinate.length;i++){
    	var HistoryId=coordinate[i]['id'];
    	var lat_lng=coordinate[i]['lat_lng'];
    	var ar=lat_lng.split(',');
        coordinatea[i]=[ar[1],ar[0],"name：" + coordinate[i]['shop_name'] + "</br>" + "address：" + coordinate[i]['address'] + "</br>" + "pm：" + coordinate[i]['pm'] + "</br>" + "nmhc：" + coordinate[i]['nmhc'] + "<a href='javascript:;' onclick='device("+HistoryId+")' style='float:right'>详情</a>"];
    }
    // 百度地图API功能
    map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(114.085947,22.547),7);//当前定位经纬度，缩放比例
    var data_info = coordinatea;
    //信息窗口大小
    var opts = {
                width : 250,     // 信息窗口宽度
                height: 130,     // 信息窗口高度
                title : "信息窗口" , // 信息窗口标题
                enableMessage:true//设置允许信息窗发送短息
               };

    for(var i=0;i<data_info.length;i++){
        var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
        var label = new BMap.Label("ywh："+coordinate[i]['ywh'],{offset:new BMap.Size(20,-10)});  //添加文字标题
        var content = data_info[i][2];
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setLabel(label);               // 标注添加文字
        addClickHandler(content,marker);      // 详细内容
    }
    function addClickHandler(content,marker){
        marker.addEventListener("click",function(e){
            openInfo(content,e)
        });
    }
    function openInfo(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    }

    /*****************************
    *左上角放大缩小，比例
    */
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
    // 左上角，添加比例尺
    var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
     //右上角，仅包含平移和缩放按钮
    //添加控件和比例尺
    map.addControl(top_left_control);
    map.addControl(top_right_navigation);
    map.enableScrollWheelZoom(true);//鼠标滚动放大缩小
    /*****************************
    *左上角放大缩小，比例
    */
</script>

</body></html>

展示效果：

微齐天大圣.

关注

0
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
javascript 百度地图定位标点，定位详情

1、先引入百度api<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度ak"></script>ak申请地址：http://lbsyun.baidu.com/apiconsole/key?application=key以下是完整代码：<!DO...
复制链接

扫一扫

专栏目录