html引用百度地图API

最新推荐文章于 2024-06-07 15:59:46 发布

sysu安仔

最新推荐文章于 2024-06-07 15:59:46 发布

阅读量5.1k

点赞数 4

文章标签：百度地图 api html

本文链接：https://blog.csdn.net/liujan511536/article/details/49996627

版权

百度地图的API为：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>

下面为完整的html代码：

<!DOCTYPE <html>
<head>
	<title>map</title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="map">
	 <div style="width: 80%; height: 800px;" id="mymap"></div>
</div>
<script type="text/javascript">
	$(function(){
		showMap(113,23); //初始坐标
	})

	//传入坐标，然后跳转到该位置
	function showMap(x, y) { 
		var map = new BMap.Map("mymap");
		map.centerAndZoom(new BMap.Point(x, y), 15); //坐标，放大倍数
		//显示左上角的辅助栏
		 map.addControl(new BMap.NavigationControl());
		//创建小红点
		var marker = new BMap.Marker(new BMap.Point(x, y));
		map.addOverlay(marker);
		//穿件创建小红点上的提示框
		var infoWindow = new BMap.InfoWindow("<p>名字:风玡</p><p>phone:12345678911</p>");
		marker.addEventListener("click", function(){
			this.openInfoWindow(infoWindow);
		})

	}
</script>
</body>
</html>

sysu安仔

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html引用百度地图API

百度地图的API为：下面为完整的html代码： map $(function(){ showMap(113,23); //初始坐标 }) //传入坐标，然后跳转到该位置 function showMap(x, y) { var map = new BMap.Map("mymap"); map.centerAndZoom(new B
复制链接

扫一扫