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

时间 2019-11-24

标签百度地图 web api 部分简单功能实现栏目 HTML 繁體版

原文原文链接

前言

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

要使用百度地图首先要进入百度地图开放平台，百度便可。登录以后进入控制台。而后建立应用。声明一下，要建立应用必须先进行开发者认证才行，这里不细说。css

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

若是不是很保密的话白名单不作任何限制java

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

html页面，代码以下web

<html>
	<head>
		<meta charset="utf-8" />
		<title>地图</title>
		<!-- 方便在移动端更好的显示 -->
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/main.css" />
		<script src="http://api.map.baidu.com/api?v=2.0&ak=****************" type="text/javascript"></script>
	</head>

	<body>
		<input type="text" id="srk"/><button id="but">搜索</button>
		<div id="allmap" style="z-index: 1;"></div>
	</body>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script type="text/javascript" src="js/main.js"></script>
</html>

main.css 你们工做时不要用微软雅黑，什么梗你们百度就懂了api

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的初次学习和使用