百度地图js 基本用法介绍
Posted 我不吃番茄
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图js 基本用法介绍相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>完整demo</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <meta charset="UTF-8"> <title>baiduMap Demo</title> <style type="text/css"> body{;margin:20px;} #container{width:960px;height:720px;} </style>
/*引用地图资源*/ <script type="text/javascript"src="http://api.map.baidu.com/api?v=1.3"></script> </head> <body> <input type="text" placeholder="请在输入城市名称"/> <input type="button" id="oButton" value="点击获取经纬度" > <div id="container"></div> <input type="button" onclick="add_control_one();" value="添加比例尺和缩放平移控件" > <input type="button" onclick="delete_control_one();" value="删除比例尺和缩放平移控件" > <br/> <input type="button" onclick="add_control_two();" value="添加地图类型和缩略图" > <input type="button" onclick="delete_control_two();" value="删除地图类型和缩略图" > <script type="text/javascript"> //实例化地图，并初始化地图展示位置，必要设置 var map = new BMap.Map("container"); // 创建地图实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图，设置中心点坐标和地图级别 //以下是常用的可选设置 map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用 /*以下是比例尺和缩放平移控件*/ var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺 var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件 var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮 /*缩放控件type有四种类型: BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/ //添加控件和比例尺 function add_control_one(){ map.addControl(top_left_control); map.addControl(top_left_navigation); map.addControl(top_right_navigation); } //移除控件和比例尺 function delete_control_one(){ map.removeControl(top_left_control); map.removeControl(top_left_navigation); map.removeControl(top_right_navigation); } /*以下是地图类型和缩略图*/ var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}); var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}); var overView = new BMap.OverviewMapControl(); var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}); //添加地图类型和缩略图 function add_control_two(){ map.addControl(mapType1); //2D图，卫星图 map.addControl(mapType2); //左上角，默认地图控件 map.setCurrentCity("北京"); //由于有3D图，需要设置城市哦 map.addControl(overView); //添加默认缩略地图控件 map.addControl(overViewOpen); //右下角，打开 } //移除地图类型和缩略图 function delete_control_two(){ map.removeControl(mapType1); //移除2D图，卫星图 map.removeControl(mapType2); map.removeControl(overView); map.removeControl(overViewOpen); } </script> </body> </html>
以上是关于百度地图js 基本用法介绍的主要内容，如果未能解决你的问题，请参考以下文章