百度地图API
首先，你要去百度地图API网站申请一个密钥。官网-->http://lbsyun.baidu.com/
然后，你要打开密钥的使用权，我设置的是*（所有网站均可使用）
接下来，你可以通过百度地图API网站上的Demo源代码去自己编写自己的地图，添加对应你想要的功能，这里说一下我所用的功能和碰到的问题。
我用到的功能：定位，导航仪（上下左右，缩放等），带导航的多点批注（点击标注弹窗内带有检索菜单）
// 1。****************显示地图，添加导航，初始地北京
var map = new BMap.Map("allmap"); // 创建Map实例
map.setMapStyle({
style: 'goolelite'
}); //设置风格为精简
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var poi = new BMap.Point(111.52, 36.08);
map.centerAndZoom(poi, 10);
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e) {
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("当前定位地址为：" + address);
});
geolocationControl.addEventListener("locationError", function(e) {
// 定位失败事件
alert(e.message);
});
map.addControl(geolocationControl);
for(var cityname in mapinfo )
{
if(cityname == "某市")
{
for(var key in mapinfo.某市)
{
var createMark = function(a) {
var content = null;
//以下为从数据库中读取的内容显示（使用ajax异步读取）
content = "<div style='margin:0;line-height:20px;padding:2px;'>"+"<img src="+a.hot_picture_path+" alt='' style='float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;'/>" +"简介：" +a.brief+'</div>';
// content = "<div style='margin:0;line-height:20px;padding:2px;'>"+"简介：" +a.brief+'</div>';
//创建检索信息窗口对象
var searchInfoWindow_a = new BMapLib.SearchInfoWindow(map, content, {
title: a.village_name, //标题
width: 290, //宽度
height: 105, //高度
panel: "panel", //检索结果面板
enableAutoPan: true, //自动平移
searchTypes: [
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
var _marker = new BMap.Marker(new BMap.Point(a.latitude,a.longitude));
_marker.addEventListener("click", function(e) {
searchInfoWindow_a.open(this);
});
return _marker;
};
var marker_a = createMark(mapinfo.某市[key]);
map.addOverlay(marker_a);
marker_a.setAnimation(BMAP_ANIMATION_BOUNCE);
}
}
第二部分为批量标点，当时遇到问题，在添加多个点的标注后，点击时所弹出的信息永远是最后一个点所对应的弹窗。
看了好多博客，折腾一段时间后，终于最后解决了这个问题：在创建标注时，使用闭包，每一次创建标注对象立即添加监听事件。
效果图：
