百度Map

最新推荐文章于 2022-08-29 14:56:58 发布

cyang233

最新推荐文章于 2022-08-29 14:56:58 发布

阅读量223

点赞数

本文链接：https://blog.csdn.net/cyang233/article/details/105547942

版权

注册
搜索百度地图开发平台，登录后进入到控制台。应用管理=>我的应用=>创建应用；
输入应用名称、选择应用类型（根据需要，输入域名白名单，
这时会在应用表格中，生成一条新记录，有对应的应用编号、应用名称和访问应用（AK）等；然后就可以根据官方文档自己创建地图；
使用

var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
 
当然也可以根据城市名称设置地图的中心点：
map.centerAndZoom("上海",15);  

map.addControl(new BMap.ScaleControl());    //添加左下方比例尺控件
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.setCurrentCity("北京");          // 设置地图显示的城市

var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); 
// 创建Map实例,设置地图允许的最小/大级别
 
//当然也可以动态设置级别：
map.setMaxZoom(10);
map.setMinZoom(2);

var opts = {    
 width : 250,     // 信息窗口宽度    
 height: 100,     // 信息窗口高度    
 title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
map.addOverlay(marker);              // 将标注添加到地图中
    map.centerAndZoom(point, 15);
    var opts = {
      width : 200,     // 信息窗口宽度
      height: 100,     // 信息窗口高度
      title : "海底捞王府井店" , // 信息窗口标题
      enableMessage:true,//设置允许信息窗发送短息
      message:"点击链接看地址"
    }
    var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
    marker.addEventListener("click", function(){          
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    });
var polyline = new BMap.Polyline([    
   new BMap.Point(116.399, 39.910),    
   new BMap.Point(116.405, 39.920),
...
 ],    
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}    
);    
map.addOverlay(polyline);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图开发6</title>
    <style>
        #container{
            width: 100%;
            height: 500px;
        }
        .search{ position: relative;}
        .tip{position: absolute; top:30px; background-color: #fff; z-index: 10000000;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde"></script>
    <!-- 引入js，填入ak -->
    <script src="jquery-3.4.1.js"></script>
</head>
<body>
    <h1></h1>
    <div class="search">
        <input type="text"  id="searchbox">
        <div class="tip"></div>
    </div>
    
    <div id="container">  </div>
    <!-- 地图的容器 -->

    <script>
        var map = new BMap.Map("container");
        //初始化地图
        var point = new BMap.Point(113.665,34.784);
        //指定地图的中心点（经度，维度）
        map.centerAndZoom(point,16);
        //地图指定中旬和缩放层次
        map.enableScrollWheelZoom(true);                //地图可以缩放

         //自定义标注
         let Icon = new BMap.Icon('./assets/start_point.png',
         //图片地址
         new BMap.Size(36,42),
         //显示图片大小
         {imageSize:new BMap.Size(36,42),anchor:new BMap.Size(18,42)})
        // 把原始图片缩小到36,42  偏移到底部中心区域（默认左上角）

        var marker = new BMap.Marker(point,{icon:Icon});
        //创建一个标注
        map.addOverlay(marker);
        //添加标注到地图

    
        var local = new BMap.LocalSearch(map,{
            renderOptions:{map:map,autoViewport:true}
        });

       $(function(){
           $.ajax({
               url:'http://api.map.baidu.com/location/ip?ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde&ip=&coor=bd09ll&output=jsonp',
               dataType:"jsonp",
               success:function(res){
                   console.log(res);
                   $("h1").html(res.content.address);
               }
           })
           
       $("#searchbox").on("input",function(){
           //显示tip
           $(".tip").show();
           $.ajax({
               url:`http://api.map.baidu.com/place/v2/suggestion?query=${$("#searchbox").val()}&region=郑州&city_limit=true&output=json&ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde`,
               dataType:"jsonp",
               success:function(res){
                   console.log(res);
                   $(".tip").html(res.result.map(item=>`<p>${item.name}</p>`).join(''));
                   //设置tip的内容为result数组返回成p元素，连接字符串
               },
           })
       })
       $(".tip").on("click","p",function(){
           local.search($(this).text());
           //执行地图搜索 为当前单击的p标签
           $(".tip").hide();
           //隐藏tip
       })
 })
    </script>
</body>
</html>

cyang233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度Map

注册搜索百度地图开发平台，登录后进入到控制台。应用管理=>我的应用=>创建应用；输入应用名称、选择应用类型（根据需要，输入域名白名单，这时会在应用表格中，生成一条新记录，有对应的应用编号、应用名称和访问应用（AK）等；然后就可以根据官方文档自己创建地图；使用var map = new BMap.Map("allmap"); // 创建Map实例map.centerAn...
复制链接

扫一扫

百度Map

“相关推荐”对你有帮助么？