百度地图标注点及标注信息显示

最近领导让搞一个百度地图标注并显示其标注信息的功能，之前没有搞过地图相关的东西，今天总结一下，其实还是很简单的，不废话了，直接上代码，新手看很有用的，请仔细阅读，不要盲目求快，有些小细节刚开始还是很坑的。
首先，创建html页面，这里不讲页面，主要说一下地图相关的js。
需要的引用：在引用中输入秘钥，秘钥在开发中心获取。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

然后，开始创建地图：

    var map = new BMap.Map("allmap",{minZoom:4,maxZoom:15});    // 创建Map实例,并设置地图最大最小级别map.centerAndZoom(new BMap.Point(116.405419,39.914714), 13);  // 初始化地图,设置中心点坐标和地图级别map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP ]}));  //添加地图类型控件map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

添加这几行代码，基本的地图就成型了。
打开地图页面直接获取已经添加的标注点：

    var marker;var point;var searchInfoWindow = null;//显示标注点信息var addinfo = function (marker,searchInfoWindow){marker.addEventListener("mouseover", function () {searchInfoWindow.open(marker);});//mouseover  表示将鼠标放到标注点上，就可显示信息，点击后显示可用“click”}//删除标注点var removeMarker = function(e,ee,marker){map.removeOverlay(marker);}$(function(){$.ajax({type:"post",url:"../connection/select",async:true,dataType:"json",success:function(data){alert("success")for(var i=0;i<data.length;i++){  point =new BMap.Point(data[i].point_x,data[i].point_y);marker =new BMap.Marker(point);map.addOverlay(marker);//*****************var content = '<div style="margin:0;line-height:20px;padding:2px;">' +'<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +'地址：' + data[i].point_x +','+ data[i].point_y + '<br/>时间：'+ data[i].time +'<br/>简介：'+data[i].info +'</div>';//********************searchInfoWindow = new BMapLib.SearchInfoWindow(map,content,{title: "标题  : " +data[i].id, //标题width:290, //宽height:105, //高enableAutoPan: true, //自动平移searchTypes : [BMAPLIB_TAB_SEARCH, //周边检索BMAPLIB_TAB_TO_HERE, //到这里去BMAPLIB_TAB_FROM_HERE //从这里出发]});//给标记添加点击事件以及显示窗口信息addinfo(marker,searchInfoWindow);//创建菜单var markerMenu =new BMap.ContextMenu();markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));markerMenu.addItem(new BMap.MenuItem('编辑信息',IN.bind(marker)));marker.addContextMenu(markerMenu);}  //****},error:function(){alert("fail");}});});

添加地图响应事件，例如：单击左键，添加标注，编辑信息时保存数据

 //左键单击地图响应事件map.addEventListener("click", function(n){//1.点击动态生成标注点point=new BMap.Point(n.point.lng,n.point.lat);marker =new BMap.Marker(point);map.addOverlay(marker);//2.为标注点生成右击菜单//创建菜单，可以抽取为方法，请自行搞定var markerMenu =new BMap.ContextMenu();markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));markerMenu.addItem(new BMap.MenuItem('编辑信息',IN.bind(marker)));marker.addContextMenu(markerMenu);}); function save(){var INFO = $("#inpu").val();if (INFO == null || INFO == "") {alert("请输入信息");return;}alert(INFO +"666");$.ajax({type:"post",url:"../connection/save",async:true,dataType:"text",data:{info: INFO,"point_x":point.lng,"point_y":point.lat},success:function(data){alert("success")alert(data);},error:function(){alert("fail");}})}

基本的功能到此就可实现，其他更细节问题请根据单位要求自行设定。实现其他的功能实现逻辑都是一样的，首先你要明白目的是什么，勿盲目上手开始写，将逻辑理清楚，去查阅，事半功倍！

百度地图标注点及标注信息显示相关推荐

百度地图删除地图上所有的标注和所有的覆盖物
//百度地图删除地图上所有的标注和所有的覆盖物 NSArray* array = [NSArrayarrayWithArray:_mapView.annotations];[_mapViewremov ...
地图标注源码 php,百度地图设置坐标，标注坐标地理位置
[实例简介]百度地图设置坐标,标注坐标地理位置 [实例截图] [核心代码]// 百度地图API功能 function creat_map(e){ map = new BMap.Map("ma ...
百度地图api 点击标注后跳转页面
百度地图api 点击标注跳转页面初始化地图 window.onload = function(){//得到所有点,包括点的id.经纬度.跳转地址链接//jd. wd.hrefgetPoints(); ...
让百度地图生成器里的“标注”内容展开--解决方案
这篇文章简单的讲:直接复制文章里的"完整代码", 修改[坐标]和[公司信息]就完事了代码如果你用我写的代码,需要知道下面2个百度地图生成器:http://api.map.ba ...
气象地图gis php代码,基于百度地图API实现自动气象站点信息显示
本栏目责任编辑:代影数据库与信息管理 ComputerKnowledgeand Technology 电脑知识与技术第9卷第27期 (2013年09月) 基于百度地图API实现自动气象站点信息显示 ...
移动端百度地图多点标注php,百度地图API多重打点标注
因为之前的html地图页面,所以去找了很多Demo和代码来学习,其中有一个Demo,不知道出处但是最后用了他的方法来处理百度地图的多重打点并且显示标注信息的方法,具体代码我就不贴了,去搜索:百度地图A ...
java百度地图添加标注_调取百度地图接口，实现取自己的实时位置，然后可以在百度地图上添加信息标注...
前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现. 下面我先说一下主要实现的功能,和要实现的页面 ...
调取百度地图接口，实现取自己的实时位置，然后可以在百度地图上添加信息标注...
前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现. 下面我先说一下主要实现的功能,和要实现的页面 ...
百度地图API——ico图片标注的移动
查询了很多资料,也设想过很多方案(比如让之前的标注隐藏或者删除,再显示新的标注),没有一个较为合理的实现方案.经过不懈的寻找,终于找到了一种方法,成功实现了ico图片标注的平移.记录一下,后续再用到时 ...

百度地图标注点及标注信息显示

百度地图标注点及标注信息显示相关推荐

最新文章

热门文章