获取百度地图

最新推荐文章于 2025-03-22 09:00:00 发布

面条请不要欺负汉堡

最新推荐文章于 2025-03-22 09:00:00 发布

阅读量396

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript+TypeScript 文章标签：获取百度地图地图

本文链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/75067767

javascript+TypeScript 专栏收录该内容

47 篇文章

订阅专栏

一.获取百度地图

需要调用百度的js

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html,body,div,ul,li{
	margin: 0;
	padding: 0;
}
a{text-decoration: none;}
 .maps_bg{
	width: 600px;
	height: 289px;
}

</style>
</head>
<body>
<div class="maps_bg" id="container"> </div> 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> 
<script src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<script type="text/javascript">
   var map = new BMap.Map("container"); 
    map.centerAndZoom(new BMap.Point(117.10, 40.13), 11); 
    map.addControl(new BMap.NavigationControl()); 
    map.addControl(new BMap.ScaleControl()); 
    map.addControl(new BMap.OverviewMapControl()); 
    map.addControl(new BMap.MapTypeControl()); 
    //搜索 
    // 创建地址解析器实例 
    var myGeo = new BMap.Geocoder(); 
    var searchTxt = '福建省福州市鼓楼区铜盘路软件大道89号福州软件园D区'; 
    // 将地址解析结果显示在地图上，并调整地图视野 
    myGeo.getPoint(searchTxt, function (point) { 
        if (point) { 
        map.centerAndZoom(point, 16); 
        var pointMarker = new BMap.Point(point.lng, point.lat); 
        geocodeSearch(pointMarker); 

        map.addOverlay(new BMap.Marker(point)); 
        } 
        else 
        alert("搜索不到结果"); 
        }, "全国"); 
    map.enableScrollWheelZoom(); 
    // 创建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"; 
    }); 
    map.addEventListener("click", function (e) { 
        document.getElementById("txtlatitude").value = e.point.lat; 
        document.getElementById("txtLongitude").value = e.point.lng; 
        map.clearOverlays(); 
        var pointMarker = new BMap.Point(e.point.lng, e.point.lat); // 创建标注的坐标 
        addMarker(pointMarker); 
        geocodeSearch(pointMarker); 
    }); 
    function addMarker(point) { 
        var myIcon = new BMap.Icon("mk_icon.png", new BMap.Size(21, 25), 
        { offset: new BMap.Size(21, 21), 
        imageOffset: new BMap.Size(0, -21)  

        }); 
        var marker = new BMap.Marker(point, { icon: myIcon }); 
        map.addOverlay(marker); 
    } 
    function geocodeSearch(pt) { 
        var myGeo = new BMap.Geocoder(); 
        myGeo.getLocation(pt, function (rs) { 
        var addComp = rs.addressComponents; 
        }); 
    }
</script>
</body>
</html>