百度地图

百度地图

  • Javascript API
    • 快速创建一张地图

Javascript API

由JavaScript语言编写的应用程序接口,是功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,支持HTML5特性的地图开发。支持HTTP和HTTPS,免费对外开放,可直接使用。在使用前,您需先申请密钥(ak)才可使用。

快速创建一张地图

  
<html>
<head>  
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, Worldtitle>  
	<style type="text/css">  
		html{height:100%}  
		body{height:100%;margin:0px;padding:0px}  
		#container{height:100%}  
	style>  
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">
//v3.0版本的引用方式:src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
	script>
head>  
<body>  
	<div id="container">div> 
	<script type="text/javascript"> 
		// 创建地图实例 
		var map = new BMap.Map("container");
		// 创建点坐标  
		var point = new BMap.Point(116.404, 39.915);
		// 初始化地图,设置中心点坐标和地图级别  
		map.centerAndZoom(point, 15);
		//添加地图控制
		map.enableScrollWheelZoom(true);// 可以滚动缩放
		map.addControl(new BMap.NavigationControl());//地图导航工具
		map.addControl(new BMap.ScaleControl()); //缩放控制
		map.addControl(new BMap.OverviewMapControl());  //概览  
		map.addControl(new BMap.MapTypeControl());   // 地图类型 
		//设置点的图标
		let icon =new BMap.Icon(
 			"../assets/start_point.png",
 			new BMap.Size(36,42),
 			{imageSize:new BMap.Size(36,42),
 			anchor:new BMap.Size(18,42)}
 		)
 		//标注一个点
	  var maker=new BMap.Marker(point,{icon:icon});//创建一个标注
 		//把点添加到地图
	 map.addOverlay(maker);
	 
	  //添加一个圆圈
 	var circle=new BMap.Circle(
 		point,//中心点
 		500,//半径
 		{strokeColor:"blue",strokeWeigth:2,fillOpacity:0.4}
	 )
 	map.addOverlay(circle);//把圆圈引入地图
 	//添加事件
 	map.addEventListener("click",e=>{
	 	console.log(e.point,e)//获取地图的经度纬度
	 })
	 //多边形
 	var polygon=new BMap.Polygon([
	 	new BMap.Point(113.66561084774673,34.786134531847395),
	 	new BMap.Point(113.66642830576082,34.78554160317315),
	 	new BMap.Point(113.66660796686281,34.784859729880225),
	 	new BMap.Point(113.66655406853221,34.784163027379556),
	 	new BMap.Point(113.66623067854862,34.78306607949197),
	 	new BMap.Point(113.66513474582645,4.78239900938954)
 	],
 	{strokeColor:"orange",strokeWeigth:2,fillColor:"blue",fillOpacity:0.3}
 )
 	map.addOverlay(polygon) //把多边形加入地图
 	
 	//添加信息窗口
 	var maker=new BMap.Marker(point);
 	map.addOverlay(maker);
 	var info=new BMap.InfoWindow(
	`

内容

`
, {title:"标题"} ); maker.addEventListener("click",()=>{ map.openInfoWindow(info,point);//单击弹出窗口 }) //地图搜索功能 let local=new BMap.LocalSearch(map,{ renderOptions:{map:map} }) //搜索框 function blurHd(v){ local.search(v); } //地图线路规划 //定义终点 let end=null map.addEventListener("click",e=>{ //创建一个点 end=new BMap.Point(e.point.lng,e.point.lat) var maker2=new BMap.Marker(end) map.addOverlay(maker2) //搜索路径 driving.search(point,end) }) //创建行车规划 var driving=new BMap.DrivingRoute(map,{ renderOptions:{map:map,autoViewport:true}, onSearchComplete: function(results){ if (driving.getStatus() == BMAP_STATUS_SUCCESS){ // 获取第一条方案 var plan = results.getPlan(0); // 获取方案的驾车线路 var route = plan.getRoute(0); // 获取每个关键步骤,并输出到页面 var s = []; for (var i = 0; i < route.getNumSteps(); i ++) { var step = route.getStep(i); console.log(step); } } } })
script> body> html>

你可能感兴趣的:(百度地图,javascript,html)