调用百度地图接口，在地图上添加标记并点击显示具体信息

最新推荐文章于 2024-05-06 03:07:01 发布

置顶总写bug的程序员

最新推荐文章于 2024-05-06 03:07:01 发布

阅读量3.3k

点赞数 3

文章标签： html5 js 街景地图 html layui

本文链接：https://blog.csdn.net/weixin_43857576/article/details/110310037

版权

对于在想实现地图功能时，百度地图和高德地图都提供了很好的API接口，直接进入官网查找相应的开发文档即可。
我这里使用的是百度地图，首先你得申请一个百度的密钥，这个很简单，网上很多教程。
货不多说，下面看代码

<!DOCTYPE html>
<html xmlns:asp="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=d5Y5C26Xbhr3rBHo3GzzaA7xcXev6NL0"></script>
    <title>添加信息窗口</title>
</head>
<body>
<div id="allmap"></div>
</body>
<script>
    // An highlighted block
    //百度地图API功能

    function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "//api.map.baidu.com/api?v=2.0&ak=d5Y5C26Xbhr3rBHo3GzzaA7xcXev6NL0&callback=init";
        document.body.appendChild(script);
    }
    window.init = function() {
        var map = new BMap.Map("allmap");            // 创建Map实例
        //var point = new BMap.Point(109.18592,34.36912); // 创建点坐标
        map.centerAndZoom(new BMap.Point(109.19708,34.36820), 15);  // 设置中心点,地图初始化
        //map.centerAndZoom(points,20);
        map.setCurrentCity("西安");          //设置当前城市
        map.clearOverlays();
        map.addControl(new BMap.MapTypeControl());
        map.enableScrollWheelZoom(true);                 //启用滚轮放大缩小
        map.addEventListener('click', function(e) {
            alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
            var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
            alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
        });
        //向地图中添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);


		//向地图中添加标记点
        var myIcon =new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {    //小车图片
            offset: new BMap.Size(0, -5),    //相当于CSS精灵
            imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
        });

        var points = [new BMap.Point(109.19474,34.36847),new BMap.Point(109.19435,34.37712),new BMap.Point(109.19261,34.37617),new BMap.Point(109.19701,34.37728),new BMap.Point(109.19702,34.37776),new BMap.Point(109.19784,34.37738),new BMap.Point(109.19784,34.376911),new BMap.Point(109.1987,34.37333),new BMap.Point(109.19705,34.36824),new BMap.Point(109.1836,34.37393)];   //10个坐标点

        var marker1 =new BMap.Marker(points[1],{icon:myIcon});  // 创建10个标注
        var marker2 =new BMap.Marker(points[2],{icon:myIcon});
        var marker3 =new BMap.Marker(points[3],{icon:myIcon});
        var marker4 =new BMap.Marker(points[4],{icon:myIcon});
        var marker5 =new BMap.Marker(points[5],{icon:myIcon});
        var marker6 =new BMap.Marker(points[6],{icon:myIcon});
        var marker7 =new BMap.Marker(points[7],{icon:myIcon});
        var marker8 =new BMap.Marker(points[8],{icon:myIcon});
        var marker9 =new BMap.Marker(points[9],{icon:myIcon});
        var marker0 =new BMap.Marker(points[0],{icon:myIcon});

        map.addOverlay(marker1);              // 将标注添加到地图中
        map.addOverlay(marker2);
        map.addOverlay(marker3);
        map.addOverlay(marker4);
        map.addOverlay(marker5);
        map.addOverlay(marker6);
        map.addOverlay(marker7);
        map.addOverlay(marker8);
        map.addOverlay(marker9);
        map.addOverlay(marker0);

        map.setViewport(points);         //调整地图的最佳视野为显示标注数组point

        var opts1 = {title : '<span style="font-size:14px;color:#0A8021">DTU01</span>'};
        var opts2 = {title : '<span style="font-size:14px;color:#0A8021">DTU02</span>'};
        var opts3 = {title : '<span style="font-size:14px;color:#0A8021">DTU03</span>'};
        var opts4 = {title : '<span style="font-size:14px;color:#0A8021">DTU04</span>'};
        var opts5 = {title : '<span style="font-size:14px;color:#0A8021">DTU05</span>'};
        var opts6 = {title : '<span style="font-size:14px;color:#0A8021">DTU06</span>'};
        var opts7 = {title : '<span style="font-size:14px;color:#0A8021">DTU07</span>'};
        var opts8 = {title : '<span style="font-size:14px;color:#0A8021">DTU08</span>'};
        var opts9 = {title : '<span style="font-size:14px;color:#0A8021">DTU09</span>'};
        var opts0 = {title : '<span style="font-size:14px;color:#0A8021">DTU10</span>'};

        var infoWindow1 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>经度:</b1>09.19474</br><b>纬度:</b>34.36847</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts1);  // 创建信息窗口对象，引号里可以书写任意的html语句。
        var infoWindow2 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>经度:</b>109.19435</br><b>纬度:</b>34.37712</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts2);
        var infoWindow3 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>经度:</b>109.19261</br><b>纬度:</b>34.37617</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts3);
        var infoWindow4 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>经度:</b>109.19501</br><b>纬度:</b>34.37728</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts4);
        var infoWindow5 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>经度:</b>109.19601</br><b>纬度:</b>34.37628</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts5);
        var infoWindow6 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>经度:</b>109.19771</br><b>纬度:</b>34.37528</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts6);
        var infoWindow7 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>经度:</b>109.19761</br><b>纬度:</b>34.37428</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts7);
        var infoWindow8 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>经度:</b>109.19731</br><b>纬度:</b>34.37578</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts8);
        var infoWindow9 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>经度:</b>109.19741</br><b>纬度:</b>34.37598</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts9);
        var infoWindow0 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>经度:</b>109.19752</br><b>纬度:</b>34.37328</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts0);

        marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
        marker2.addEventListener("click", function(){this.openInfoWindow(infoWindow2);});
        marker3.addEventListener("click", function(){this.openInfoWindow(infoWindow3);});
        marker4.addEventListener("click", function(){this.openInfoWindow(infoWindow4);});
        marker5.addEventListener("click", function(){this.openInfoWindow(infoWindow5);});
        marker6.addEventListener("click", function(){this.openInfoWindow(infoWindow6);});
        marker7.addEventListener("click", function(){this.openInfoWindow(infoWindow7);});
        marker8.addEventListener("click", function(){this.openInfoWindow(infoWindow8);});
        marker9.addEventListener("click", function(){this.openInfoWindow(infoWindow9);});
        marker0.addEventListener("click", function(){this.openInfoWindow(infoWindow0);});

    }
    loadJScript()
</script>

<script>
    layui.use('theme/settings/earth', layui.factory('theme/settings/earth'));
</script>

<!--<script type="text/javascript" src="js\jquery-2.1.1.min.js"></script>-->

</html>

这里使用的是layui前段框架，和百度官方提供的代码有所区别，下面是官方提供的案列

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
	<title>添加信息窗口</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMapGL.Map("allmap");
	var point = new BMapGL.Point(116.404, 39.925);
	map.centerAndZoom(point, 15);
	
	var marker = new BMapGL.Marker(point);  // 创建标注
	map.addOverlay(marker);              // 将标注添加到地图中
	var opts = {
	    width : 200,     // 信息窗口宽度
	    height: 100,     // 信息窗口高度
	    title : "故宫博物院" , // 信息窗口标题
	    message:"这里是故宫"
	}
	var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
	marker.addEventListener("click", function(){          
		map.openInfoWindow(infoWindow, point); //开启信息窗口
	}); 
</script>

在layui中需要对其先初始化,对地图一些功能的实现都写在 window.init = function() 里面。

 function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "//api.map.baidu.com/api?v=2.0&ak=d5Y5C26Xbhr3rBHo3GzzaA7xcXev6NL0&callback=init";
        document.body.appendChild(script);
    }
     window.init = function() {
     
	}
loadScript()

运行出来后是
红色的即为添加的标记点

总写bug的程序员

关注

3
点赞
踩
24

收藏

觉得还不错? 一键收藏
2
评论
调用百度地图接口，在地图上添加标记并点击显示具体信息

对于在想实现地图功能时，百度地图和高德地图都提供了很好的API接口，直接进入官网查找相应的开发文档即可。我这里使用的是百度地图，首先你得申请一个百度的密钥，这个很简单，网上很多教程。货不多说，下面看代码<!DOCTYPE html><html xmlns:asp=""><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <met
复制链接

扫一扫