【HTML5】调用百度地图API做的小Demo
一、简介：
以下是根据百度地图API自己写的小Demo，写了些功能，有些有冲突注释了，可将功能键化差分使用，借鉴即可。
大部分语句均有注释
* 其中“你的AK”需要自己去官网申请替换，申请类型一定要为浏览器端
* 若使用3D效果地图需要将BMap空间命名换位BMapGL，scrpt申请也需要添加一个参数type=webgl
二、这是JavaScript API：
https://openapi.baidu.com/map/reference/index.php
三、代码如下：
<html>
<title>HTML5调用百度地图API进行地理定位title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#container {
position: relative;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
#result,
#result table {
width: 200px;
}
style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?&v=3.0&ak=AN6hVXLddHcgWYGG0pmfG90dBsGgE1zR">script>
head>
<body style="margin:0">
<div id="container">div>
<div style="position: absolute;top: 20px;left: 20px;width: 100%;">
<input type="text" id='starting' placeholder="请输入出发地" style="width: 180px;height: 30px;padding-left: 5px;border-color:#028FFF;" />
<input type="text" id='destination' placeholder="请输入目的地" style="width: 180px;height: 30px;padding-left: 5px;border-color:#028FFF;" />
<button type="button" style="width: 50px;height: 35px;color: white;background-color:#028FFF;border-radius: 5px;border-color:rgba(2, 141, 255, 0.548);" onclick="search()">搜索button>
<input type="text" id="suggestId" placeholder="查询地点" style="margin-right: 150px; float: right;width: 180px;height: 30px;padding-left: 5px;border-color:#028FFF;" />
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;">div>
div>
<div style="position: absolute;top: 100px;right:20px">
<button type="button" style="width: 50px;height: 50px;color: white;background-color:#028FFF;border-radius: 5px;border-color:rgba(2, 141, 255, 0.548);" onclick="myself()">定位自身button>
div>
<div id="result" style="position: absolute;top:50px;left: 5px;display: none;">
div>
<div id="resultClose" onclick="closeResilt()"
style="position: absolute;top: 50px;left: 190px;width: 15px;height: 15px;display: none;">Xdiv>
body>
html>
<script type="text/javascript">
//默认地理位置设置为欧亚学院南门内108.927928,34.180814
var x = 108.927928, y = 34.180814;
var map;
function G(id) {
return document.getElementById(id);
}
window.onload = function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition); //获取当前坐标
map = new BMap.Map("container"); //创建MAP实例
var point = new BMap.Point(x, y);
map.centerAndZoom(point, 19); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// 覆盖区域图层测试
map.addTileLayer(new BMap.PanoramaCoverageLayer());
var stCtrl = new BMap.PanoramaControl(); //构造全景控件
stCtrl.setOffset(new BMap.Size(20, 20));
map.addControl(stCtrl);
// map.setHeading(64.5);//设置视角倾斜角
// map.setTilt(73); //设置视角角度
// var navi3DCtrl = new BMap.NavigationControl3D(); // 添加3D控件
// map.addControl(navi3DCtrl);
// var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
// map.addControl(scaleCtrl);
// var zoomCtrl = new BMap.ZoomControl(); // 添加比例尺控件
// map.addControl(zoomCtrl);
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "suggestId"
, "location": map
});
ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem
index = " + e.fromitem.index + "
value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "
ToItem
index = " + e.toitem.index + "
value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML = "onconfirm
index = " + e.item.index + "
myValue = " + myValue;
setPlace();
});
function setPlace() {
map.clearOverlays(); //清除地图上所有覆盖物
function myFun() {
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
return;
}
alert("你的浏览器不支持获取地理位置！");
};
function showPosition(position) {
x = position.coords.latitude;
y = position.coords.longitude;
}
function search() {
var starting = G("starting").value//出发地
var destination = G("destination").value//目标地
//步行规划路线
var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, panel: "result", autoViewport: true } });
walking.search(starting, destination);
walking.setResultsHtmlSetCallback( //设置结果列表创建后的回调函数
() => {
G('result').style.display = 'block'
G('resultClose').style.display = 'block'
}
)
}
function closeResilt() {
G('result').style.display = 'none'
G('resultClose').style.display = 'none'
map.clearOverlays();
}
function myself() {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) { //转到当前坐标
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
map.clearOverlays();
var mk = new BMap.Marker(r.point);// 创建标注
map.addOverlay(mk); //标记自身
map.panTo(r.point); //缩放至新位置
}
else {
alert('定位失败，请稍后重试！');
}
}, { enableHighAccuracy: true }) //开启精确定位
}
script>