百度地图操作

来源：互联网发布：微信点赞软件下载编辑：程序博客网时间：2024/05/23 20:50

//根据ip地址获取地图<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}#r-result{height:100%;width:20%;float:left;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script><title>IP定位获取当前城市</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">var map = new BMap.Map("allmap");var point = new BMap.Point(116.331398,39.897445);map.centerAndZoom(point,12);function myFun(result){    var cityName = result.name;    map.setCenter(cityName);    alert(cityName);}var myCity = new BMap.LocalCity();myCity.get(myFun);</script>

城市居中显示

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}#r-result{height:100%;width:20%;float:left;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script><title>用城市名设置地图中心点</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">var map = new BMap.Map("allmap");   // 创建Map实例map.centerAndZoom("上海",12);     // 初始化地图,设置中心点坐标和地图级别。//map.centerAndZoom(new BMap.Point(116.4035,39.915),12);</script>

城市选择

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body, html{width: 100%;height: 100%;overflow: hidden;margin:0;}#l-map {margin-right: 300px;height: 100%;overflow: hidden;}#result {border-left:1px dotted #999;height:100%;width:295px;position:absolute;top:0px;right:0px;font-size:12px;}dl,dt,dd,ul,li{    margin:0;    padding:0;    list-style:none;}dt{    font-size:14px;    font-family:"微软雅黑";    font-weight:bold;    border-bottom:1px dotted #000;    padding:5px 0 5px 5px;    margin:5px 0;}dd{    padding:5px 0 0 5px;}li{    line-height:28px;}.cityList{height:320px;width:382px;overflow-y:auto;font-size:12px;}.cityList .bmaplib_cityList dl dt{margin:0px;padding:0px;font-size:12px;color:#666;}.cityList .bmaplib_cityList dl dt a {color:#666;text-decoration:none;}.cityList .bmaplib_cityList dl dt a:hover {color:#FF9900;text-decoration:underline;}.cityList .bmaplib_cityList dl dd a {color:#006BE3;text-decoration:none;}    .cityList .bmaplib_cityList dl dd a:hover {color:#FF9900;text-decoration:underline;}    .sel_container{z-index:9999;font-size:12px;position:absolute;right:300px;top:0px;width:140px;background:rgba(255,255,255,0.8);height:30px;line-height:30px;padding:5px;}    .map_popup {position: absolute;z-index: 200000;width: 382px;height: 344px;right:320px;top:40px;}    .map_popup .popup_main { background:#fff;border: 1px solid #8BA4D8;height: 100%;overflow: hidden;position: absolute;width: 100%;z-index: 2;}    .map_popup .title {background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;    color: #6688CC;font-size: 12px;font-weight: bold;height: 24px;line-height: 25px;padding-left: 7px;}    .map_popup button {background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;    border: 0 none;cursor: pointer;height: 12px;position: absolute;right: 4px;top: 6px;width: 12px;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=63ebcdc7ae2791e5c03acda6aca6de52"></script><!-- 加载百度地图样式信息窗口 --><script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script><link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /><!-- 加载城市列表 --><script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script><title>叠加麻点图Demo</title></head><body><div id="l-map"></div><div id="result"> <dl>    <dt>基本操作</dt>        <dd>            <ul>                <li><button id="open">打开</button><button id="close">关闭</button>            </ul>        </dd></div><!--城市列表--><div class="sel_container"><strong id="curCity">北京市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div><div class="map_popup" id="cityList" style="display:none;"><div class="popup_main"><div class="title">城市列表</div><div class="cityList" id="citylist_container"></div><button id="popup_close"></button></div></div>   </body></html><script type="text/javascript">var map = new BMap.Map("l-map");          // 创建地图实例var point = new BMap.Point(116.403694,39.927552);  // 创建点坐标map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom();map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件var customLayer;function addCustomLayer(keyword) {    if (customLayer) {        map.removeTileLayer(customLayer);    }    customLayer=new BMap.CustomLayer(4032);    map.addTileLayer(customLayer);    customLayer.addEventListener('hotspotclick',callback);}addCustomLayer();function callback(e)//单击热点图层{  var customPoi = e.customPoi,  str = [];str.push("address = " + customPoi.address);str.push("phoneNumber = " + customPoi.phoneNumber);        var content = '<p style="width:280px;margin:0;line-height:20px;">地址：' + customPoi.address + '<br/>电话：' + customPoi.phoneNumber + '</p>';        var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {            title: customPoi.title, //标题            width: 290, //宽度            height: 40, //高度            panel : "panel", //检索结果面板            enableAutoPan : true, //自动平移            enableSendToPhone: true, //是否显示发送到手机按钮            searchTypes :[                BMAPLIB_TAB_SEARCH,   //周边检索                BMAPLIB_TAB_TO_HERE,  //到这里去                BMAPLIB_TAB_FROM_HERE //从这里出发            ]        });        var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);        searchInfoWindow.open(point);}document.getElementById("open").onclick = function(){addCustomLayer();};document.getElementById("close").onclick = function(){if (customLayer) {        map.removeTileLayer(customLayer);    }};// 创建CityList对象，并放在citylist_container节点内var myCl = new BMapLib.CityList({container : "citylist_container", map : map});// 给城市点击时，添加相关操作myCl.addEventListener("cityclick", function(e) {// 修改当前城市显示document.getElementById("curCity").innerHTML = e.name;// 点击后隐藏城市列表document.getElementById("cityList").style.display = "none";});// 给“更换城市”链接添加点击操作document.getElementById("curCityText").onclick = function() {var cl = document.getElementById("cityList");if (cl.style.display == "none") {cl.style.display = "";} else {cl.style.display = "none";}};// 给城市列表上的关闭按钮添加点击操作document.getElementById("popup_close").onclick = function() {var cl = document.getElementById("cityList");if (cl.style.display == "none") {cl.style.display = "";} else {cl.style.display = "none";}};</script></body></html>

获取精度纬度

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}#r-result{height:100%;width:20%;float:left;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script><title>单击获取点击的经纬度</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">var map = new BMap.Map("allmap");            // 创建Map实例map.centerAndZoom("重庆",12);                   // 初始化地图,设置城市和地图级别。map.addEventListener("click",function(e){    alert(e.point.lng + "," + e.point.lat);});</script>

0 0