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

最新推荐文章于 2023-05-08 00:30:00 发布

weixin_34329187

最新推荐文章于 2023-05-08 00:30:00 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

文章标签： python 开发工具 javascript ViewUI

原文链接：https://my.oschina.net/u/4100388/blog/3027509

本文介绍如何使用百度地图Web API创建地图实例、添加标注和比例尺等基本操作，并实现了搜索地点和显示经纬度等功能。

2019独角兽企业重金招聘Python工程师标准>>>

前言

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

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

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

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

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

html页面，代码如下

<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 大家工作时不要用微软雅黑，什么梗大家百度就懂了

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

转载于:https://my.oschina.net/u/4100388/blog/3027509