百度地图_自动标记/点击图标显示对应信息

1、百度地图前端页面–根据json数据自动标记，点击标记显示对应信息。
百度地图JavaScript API ：http://lbsyun.baidu.com/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.map.baidu.com/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.4202251931);//创建地图中心点坐标对象（日照市）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 = new   BMap.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>

百度地图_自动标记/点击图标显示对应信息相关推荐

解决在EasyUI中使用百度地图出现不居中和坐标图标显示异常的问题(红色代码部分)
问题:1.加载指定经纬度的坐标点怎么都不居中显示,总是显示在左上角,需要在地图加载完后拖动才看到指定的坐标点:2.显示的坐标点图片没有正常显示,后面使用了自定义坐标图片(如图): 解决后: 参考: 1 ...
微信小程序地图标记点marker，点击标记点显示详细信息
项目中想要实现的效果在地图上显示所有数据标点,点击显示详情信息,首先看一下图片是否符合各位的需求,在这里也是学习加深一下直接上代码: wxml: <map id="myMap&quo ...
android开发百度地图定位+搜索周边+点击兴趣点+显示旗袍,高德地图API之地图搜索+兴趣点POI+标记点操作...
使用AMap.Autocomplete() 自动补全插件,实现搜索功能 metacharset="UTF-8"title>map style>*{margin:0;pa ...
2019-详细Android Studio开发百度地图(5)—百度地图_导航和TTS语音播报的实现
百度地图_导航和TTS语音播报的实现前言从小白一步步开始,很多资源是很久以前的,而且没有操作配套截图和资源分享.现在本踩过了很多坑,现在开发完成后决定重新写一份教程,希望能借此帮助到许多其他有这方 ...
2019-详细Android Studio开发百度地图(4)—百度地图_路线规划的实现
百度地图_路线规划的实现前言从小白一步步开始,很多资源是很久以前的,而且没有操作配套截图和资源分享.现在本踩过了很多坑,现在开发完成后决定重新写一份教程,希望能借此帮助到许多其他有这方面需求的人. ...
百度地图鼠标经过图层时高亮显示图标及标签内容
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
百度地图AK申请注意+百度地图API生成热力图+调用百度地图API自动获取经纬度和地址
文章目录一.百度地图AK密钥申请二.调用百度地图API生成热力图三.调用百度地图API自动获取经纬度和地址一.百度地图AK密钥申请点击百度地图API控制台,输入登录账户,即可进入,若账户未完 ...
android百度地图定位自定义图标,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...
本文将带你了解Android应用开发之android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): ...
android百度地图画圆,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...
本文将带你了解Android应用开发android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): 1 ...

百度地图_自动标记/点击图标显示对应信息

百度地图_自动标记/点击图标显示对应信息相关推荐

最新文章

热门文章