高德地图API以案例学习

最新推荐文章于 2024-08-09 18:31:39 发布

chenjing928

最新推荐文章于 2024-08-09 18:31:39 发布

阅读量3.3k

点赞数 2

分类专栏：地图API 文章标签：高德地图API

本文链接：https://blog.csdn.net/chenjing928/article/details/80245833

版权

地图API 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.从最开始展示地图，以下代码将可以显示最基础的一个地图，唯一需要改变的就是要把key值改为你自己的（点我申请高德地图key）

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>基本地图展示</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <!-- 这里只要把你自己的key值替换一下 即可-->
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
	<!--显示高德地图需要一个div作为地图的容器，-->
<div id="container"></div>

<script>
	/*这里的 container必须和地图容器的div的id一致*/
    var map = new AMap.Map('container', {

resizeEnable: true,//是否监控地图尺寸变化

zoom:11,//地图初始化的级别 center: [116.397428, 39.90923]//中心点 });</script></body></html>

2.带功能的地图（增加了三个插件：比例尺、工具条、鹰眼）

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>带功能控件的地图</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <!--插件的较方便的导入方式为直接在这里写上 plugin=xxx插件 -->
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar"></script>
</head>
<body>
<div id="container"></div>
<script>
	//比例尺(左下，代表地图中的一厘米对应实际的距离)
    var scale = new AMap.Scale(),
    //工具条（左上，可以使用工具条进行上下左右和缩放）
    toolBar = new AMap.ToolBar(),
    //鹰眼 （相当于打游戏的小地图）
    overView = new AMap.OverView({
    	//鹰眼是默认不展开的，设置isOpen为true可以默认展开
    	isOpen:true
    }),
    map = new AMap.Map("container", {
        resizeEnable: true,
        zoom:16
    });
    //往地图中添加这三个插件
    map.addControl(scale);
    map.addControl(toolBar);
    map.addControl(overView);
</script>
</body>
</html>

3.地图属性

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图属性</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=0ece4330ff2cbdd413a1149f838f4848&plugin=AMap.MouseTool"></script>
</head>
<body>
<div id="container"></div>

<script>
    map = new AMap.Map("container", {
        resizeEnable: true,
        zoom:16,
        center : [116.4203240000,39.9083130000]	,
		zooms:[8,16],//地图缩放级别范围：最大16，最小8
//		lang:'zh_en',//地图语言，有zh_cn中文简体（默认），这里zh_en为中英对照
		expandZoomRange :true,//是否支持可以扩展最大缩放级别,和zooms属性配合使用 设置为true的时候，zooms的最大级别在PC上可以扩大到20级
//		dragEnable : false, //地图是否可通过鼠标拖拽平移
//		zoomEnable:false,   //地图是否可缩放
//		doubleClickZoom:false, //双击放大地图
//		keyboardEnable:false, //可否键盘控制地图  方向键平移，+-缩放
//		scrollWheel:false    //地图是否可通过鼠标滚轮缩放（跟zoomEnable的区别是：zoomEnable禁止了所有的缩放，比如键盘）
		//以上5个默认值都是true
//		features :["bg","road"] //地图上显示元素的种类，有四种 地图背景： bg, 标注：point，道路：road，建筑物：building //如果不写，默认为全部都有
    });
</script>
</body>
</html>

4.设置地图显示范围、设置地图状态

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>限制地图显示范围及设置地图状态</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
	<body>
		<div id="container"></div>
		<div class='button-group' style="background-color: #0d9bf2">
		    <input type="checkbox"  οnclick="toggleDrag(this)">允许拖拽地图
		    <input type="checkbox"  οnclick="toggleKeyboard(this)">允许键盘平移
		    <input type="checkbox"  οnclick="toggleDoubleClickZoom(this)">允许双击放大地图
		    <input type="checkbox"  οnclick="toggleIsHotspot(this)">允许叠加地图热点
		</div>
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				//将鼠标拖拽平移、键盘控制、双击放大都置为false
				dragEnable:false,
				keyboardEnable:false,
				doubleClickZoom:false
			});
			//设置地图限制范围(第一个点是西南坐标，第二个是东南)
			var bound = new AMap.Bounds([115.37874,28.335399],[116.45952,29.012533])
			map.setLimitBounds(bound);
			//点击允许拖拽的复选框 ()
			var toggleDrag = function(checkbox){
				if(checkbox.checked){
					map.setStatus({dragEnable:true});
				}else {
					map.setStatus({dragEnable:false});
				}
			}
			//点击允许键盘控制
			var toggleKeyboard = function(checkbox) {
				if(checkbox.checked) {
					map.setStatus({keyboardEnable:true});
				}else {
					map.setStatus({keyboardEnable:false});
				}
			}
			//双击放大
			function toggleDoubleClickZoom(checkbox){
				map.setStatus({doubleClickZoom:checkbox.checked?true:false});
			}
			//开启热点点击
			function toggleIsHotspot(checkbox) {
				map.setStatus({isHotspot:checkbox.checked ? true : false});
			}
			//监听热点点击
			var hotSpotMarker;
			map.on("hotspotclick",function(e){
				if(hotSpotMarker){
					hotSpotMarker.setMap(null);
				}
				hotSpotMarker = new AMap.Marker({
					position:e.lnglat,
					map:map,
					content:'<div>'+ e.name +'</div>'
				});
			});
		</script>
	</body>
</html>

5.鼠标左键点击获取坐标及双击右击事件

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>鼠标拾取地图坐标及双击右击事件</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
    <table>
        <tr>
            <td class="column2">
                <label>左击获取经纬度：</label>
            </td>
        </tr>
        <tr>
            <td class="column2">
                <input type="text" readonly="true" id="lnglat">
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
	
	var map = new AMap.Map("container",{
		resizeEnable:true,
		doubleClickZoom: false
	})
	//鼠标单击左键事件
	map.on('click',function(e){
		//将当前点击的经纬度赋值到文本框
		document.getElementById("lnglat").value = e.lnglat.getLng() +","+e.lnglat.getLat();
	})
	//鼠标单击右键事件
	map.on('rightclick',function(){
		//地图级别放大
		map.zoomIn();
	})
	//鼠标双击事件
	map.on('dblclick',function(){
		//弹出当前地图级别
		alert(map.getZoom())
	})
</script>
	</body>
</html>

chenjing928

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
高德地图API以案例学习

1.从最开始展示地图，以下代码将可以显示最基础的一个地图，唯一需要改变的就是要把key值改为你自己的（点我申请高德地图key）&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="
复制链接

扫一扫

专栏目录