1、百度地图前端页面–根据json数据自动标记，点击标记显示对应信息。
百度地图JavaScript API ：/cms/jsapi/reference/jsapi_reference.html#a0b0
2、代码+注解，使用前修改ak。
<!DOCTYPE html><html><head><title>Leaflet4</title><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript" src="http://api./api?v=2.0&ak=你的AK"></script><style TYPE="text/css">#container{width: 100%;height: 500px;float: left; border: 1px solid rgb(200, 200, 200); margin-left: 12px; overflow: hidden; position: relative; z-index: 0; color: rgb(0, 0, 0); text-align: left;}</style></head><body><div id="container"></div></body><script>//地图初始化var map = new BMap.Map("container");//创建地图对象var point = new BMap.Point(119.507179943,35.451931);//创建地图中心点坐标对象（日照市）map.centerAndZoom(point, 12);//设置初始化地图中心位置坐标和地图级别map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放map.enableKeyboard(); //键盘放大//添加地图类型控件（地图/混合）map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]})); //城市定位map.enableInertialDragging();map.enableContinuousZoom();var size = new BMap.Size(10, 20);map.addControl(new BMap.CityListControl({anchor: BMAP_ANCHOR_TOP_LEFT,offset: size,}));//标注信息jsonvar str = {"xy":[{"x":"119.524068","y":"35.442753","title":"河·左岸","text":"温度/浓度"},{"x":"119.494604","y":"35.440871","title":"香河祥和嘉园","text":"温度/湿度/压力/浓度"}]};//循环取出对应数据 for(let i = 0;i<str.xy.length;i++){var points = new BMap.Point(str.xy[i].x,str.xy[i].y);//创建经纬度坐标对象var marker = new BMap.Marker(points);//创建标记对象map.addOverlay(marker); //标记地图//添加标记点击事件marker.addEventListener("click",function(e){addMarker(str.xy[i]);});}// 编写自定义函数,绑定信息窗口function addMarker(data){//重新创建经纬度坐标对象，防止覆盖var points = new BMap.Point(data.x,data.y);var size = newBMap.Size(0,-13);var opts = {width: 250, // 信息窗口宽度 height: 100, // 信息窗口高度 title: data.title, // 信息窗口标题 offset: size//增加偏移量}//创建信息窗口对象var infoWindow = new BMap.InfoWindow(data.text, opts); //对标注对象和信息窗口进行绑定map.openInfoWindow(infoWindow, points);}</script></html>
