最近领导让搞一个百度地图标注并显示其标注信息的功能,之前没有搞过地图相关的东西,今天总结一下,其实还是很简单的,不废话了,直接上代码,新手看很有用的,请仔细阅读,不要盲目求快,有些小细节刚开始还是很坑的。
首先,创建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");
}
})
}
基本的功能到此就可实现,其他更细节问题请根据单位要求自行设定。实现其他的功能实现逻辑都是一样的,首先你要明白目的是什么,勿盲目上手开始写,将逻辑理清楚,去查阅,事半功倍!