百度地圖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的初次學習和使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。