百度地图 API 基础入门——前端（一）

来源：互联网发布：上海一本升学率知乎编辑：程序博客网时间：2024/05/17 22:27

一、获取密钥（AK）

*申请AK

1、登录百度账号

2、创建应用

3、查看 AK

注：由于AK不能展示给其他人看，所以我这里就打码了。

二、获取JavaScript API服务方法

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙">    //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"    //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize" </script>

注：这一段代码要写在<head>...</head>里面，并且要换上你的AK

三、第一个小案例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Hello, World</title>    <style type="text/css">        html{height:100%}        body{height:100%;margin:0px;padding:0px}        #container{height:100%}    </style>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"        //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"    </script></head><body><div id="container"></div><script type="text/javascript">    var map = new BMap.Map("container");          // 创建地图实例    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别    map.addControl(new BMap.NavigationControl());  //地图平移缩放控件    map.addControl(new BMap.ScaleControl());    map.addControl(new BMap.OverviewMapControl());    map.addControl(new BMap.MapTypeControl());    map.setCurrentCity("北京");</script></body></html>

四、第二个案例（标记位置）

<html><head>    <meta charset="UTF-8">    <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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}        #allmap{width: 100%;height: 100%;margin:0;height: 300px}    </style>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>    <title>浏览器定位</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">    // 百度地图API功能    var map = new BMap.Map("allmap");    var point = new BMap.Point(114.054893,22.553926);    map.centerAndZoom(point,20);    // 创建地址解析器实例    var myGeo = new BMap.Geocoder();    // 将地址解析结果显示在地图上,并调整地图视野    myGeo.getPoint("深圳市福田区第一世界广场", function(point){        if (point) {            var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM}            map.addControl(new BMap.NavigationControl(opts));//地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。            map.addControl(new BMap.OverviewMapControl()); //缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。            map.addControl(new BMap.MapTypeControl());//地图类型控件，默认位于地图右上方。            map.centerAndZoom(point, 20);            var marker =new BMap.Marker(point);            map.addOverlay(marker);            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画            var optss = {                width : 240,     // 信息窗口宽度                height: 70,     // 信息窗口高度                title : "第一世界广场" , // 信息窗口标题                enableMessage:true,//设置允许信息窗发送短息            }            var infoWindow = new BMap.InfoWindow("地址：深圳市福田区第一世界广场", optss);  // 创建信息窗口对象            marker.addEventListener("click", function(){                map.openInfoWindow(infoWindow,point); //开启信息窗口            });            setTimeout(function () {                map.setZoom(20);            },2000);            map.enableScrollWheelZoom(true);        }else{            alert("您选择地址没有解析到结果!");        }    }, "深圳市");</script>

效果图：

阅读全文

0 0