百度地图开发demo

木易66丶

已于 2024-03-21 20:15:32 修改

阅读量161

点赞数

分类专栏：前端js 文章标签：百度

于 2020-10-14 12:12:12 首次发布

本文链接：https://blog.csdn.net/q_qman/article/details/109069798

版权

前端js 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=tzRMGsRbNXUyPhOc0eHLDVmt2cOqyDUP"></script> -->
	<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=tzRMGsRbNXUyPhOc0eHLDVmt2cOqyDUP&amp;services=&amp;t=20200824135534"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script>
   // 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(117.144573,36.661081);
	map.centerAndZoom(point,12);
	map.enableScrollWheelZoom(true);
	// 创建地址解析器实例
	var myGeo = new BMap.Geocoder();
	// 将地址解析结果显示在地图上,并调整地图视野
	myGeo.getPoint("济南市海信龙奥", function(point){
		if (point) {
			map.centerAndZoom(point, 16);
			map.addOverlay(new BMap.Marker(point));
		}else{
			alert("您选择地址没有解析到结果!");
		}
    }, "济南市");
   
	var geoc = new BMap.Geocoder();    
	map.addEventListener("click", function(e){        
	    var pt = e.point;
	    geoc.getLocation(pt, function(rs){
	    	console.log(rs);
	        alert(rs.address+"海信龙奥");
	    });
	});

	var opts = {
	  width : 200,     // 信息窗口宽度
	  height: 100,     // 信息窗口高度
	  title : "***智能科技有限公司" , // 信息窗口标题
	  enableMessage:true,//设置允许信息窗发送短息
	  message:"戳下面的链接看下地址喔~"
	}
	var infoWindow = new BMap.InfoWindow("地址：山东省济南市海信龙奥", opts);  // 创建信息窗口对象 
	map.openInfoWindow(infoWindow,point); //开启信息窗口

</script>

vue中使用百度地图：Vue Baidu Map

木易66丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
百度地图开发demo

<!DOCTYPE html><html><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,#allmap {.
复制链接

扫一扫