百度地图调用

Posted 2020-07-06 自由无风

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图调用相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:100%;height:500px;}
        p{margin-left:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nlYzoebodXnsUglcgiRx67Fd"></script>
    <title>纯文本的信息窗口</title>
</head>
<body>
    <div id="allmap"></div>
    <p>点击标注点，可查看由纯文本构成的简单型信息窗口</p>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(117.152755, 35.125821);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    map.centerAndZoom(point, 16);
    var opts = {
      width : 200,     // 信息窗口宽度
      height: 100,     // 信息窗口高度
      title : "海底捞王府井店" , // 信息窗口标题
      enableMessage:true,//设置允许信息窗发送短息
      message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
    }
    var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
    map.openInfoWindow(infoWindow,point); 
    marker.addEventListener("click", function(){          
        //开启信息窗口
    });
    

    map.enableScrollWheelZoom(true);
</script>

以上是关于百度地图调用的主要内容，如果未能解决你的问题，请参考以下文章

百度地图个性在线编辑器怎么改文字

如何在网页中调用百度地图api

如何调用百度地图API实现手机自动定位

我在网页上想调用百度地图，如何实现百度地图的标记功能，在html文件里写js代码

本地数据库经纬度调用百度地图API 在百度地图上显示用啥方案实现的问题。。

百度地图API快速调用，一键生成百度地图