baidumap api MySQL_百度地图web api的部分简单功能的实现

前言

地图是现在很常用的工具了，像美团，QQ，微信这些本身跟地图关系并不大的软件也都有使用地图，这无疑方便了很多，接下来我就简单的介绍一下我在学习百度地图遇到的一些问题。

要使用百度地图首先要进入百度地图开放平台，百度即可。登陆之后进入控制台。然后创建应用。声明一下，要创建应用必须先进行开发者认证才行，这里不细说。

这里默认全选，这些全是免费功能，都可以直接免费申请，注意这里的应用类型选择浏览器端

如果不是很保密的话白名单不做任何限制

接下来创建web项目，我使用的是HBuilder开发工具，我使用了一些简单的jquery来完成我的工作，main.js是项目主要用的

html页面，代码如下

地图

搜索

main.css    大家工作时不要用微软雅黑，什么梗大家百度就懂了

body,

html,

#allmap {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

font-family: "宋体";

}

重点都在main.js当中

要使用百度地图首先要创建百度地图实例 {enableMapClick: false}这段代码的意思是取消地图的单击事件，例如单击地图某一点会弹出周围相关，但是并不能实现的功能能看着很烦，所以我把他关了

创建坐标点是地图一打开默认的坐标点

地图级别就是地图显示的大小详细

// 百度地图API功能

var map = new BMap.Map("allmap",{enableMapClick: false}); // 创建Map实例

var point = new BMap.Point(116.404, 39.915); // 创建点坐标

var rank = 10; //地图级别

左上角添加比例尺，下图红方框

var top_left_control = new BMap.ScaleControl({

anchor: BMAP_ANCHOR_TOP_LEFT

}); // 左上角，添加比例尺

一些简单的功能，标注就是上图北京市上的红色标记

var marker = new BMap.Marker(point); // 创建标注

map.addOverlay(marker); // 将标注添加到地图中

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

map.centerAndZoom(point, rank); // 初始化地图,设置中心点坐标和地图级别

单击地图弹出单击所在地的经纬度

// 弹出经纬度

map.addEventListener("click", function(e) {

var lng = e.point.lat;

var lat = e.point.lng;

alert("经度：" + lng + "纬度：" + lat);

});

创建地图定位功能，我也不知道为什么要这么写，api文档上写的也没看明白，有懂的大佬在评论讲一下，谢谢

var local = new BMap.LocalSearch(map, {

renderOptions: {

map: map

}

});

单击按钮开始搜索，这里单击存在一个问题，例如我在输入框写入“体育馆”单击搜索，这个时候地图上只会显示当前城市的体育馆信息，比如打开地图默认是北京市，我不做改变就只会搜索北京市的，如果我在输入框搜索一个深圳市单击搜索后再重新输入“体育馆”地图上就只会显示深圳市的体育馆信息，目前我还没有很好的解决办法。

$("#but").click(function() {

var city = $("#srk").val();

if(city != "") {

local.search(city);

}

});

地图类型控件

//添加地图类型控件

map.addControl(new BMap.MapTypeControl({

mapTypes: [

BMAP_NORMAL_MAP,

BMAP_HYBRID_MAP

]

}));

以上就是我对百度地图web api的初次学习和使用