百度地图JavaScript API v2.0创建地图

简介: 百度地图JavaScript API v2.0创建地图

接口文档:

https://lbsyun.baidu.com/index.php?title=jspopular3.0

https://lbs.baidu.com/faq/api?title=webapi

地图创建代码:

<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  </style>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
  <title>江苏省地图</title>
</head>
<body>
  <div id="allmap"></div>
  <div id="r-result"></div>
</body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");  // 创建Map实例
  map.centerAndZoom("江苏省",9);      // 初始化地图,用城市名设置地图中心点
  map.enableScrollWheelZoom();
    // 全景控件
    // var stCtrl = new BMap.PanoramaControl(); //构造全景控件
  // stCtrl.setOffset(new BMap.Size(20, 20));
  // map.addControl(stCtrl);//添加全景控件
    // 工具控件
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
  var top_left_navigation = new BMap.NavigationControl();  //左上角,添加默认缩放平移控件
  var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角,仅包含平移和缩放按钮
  /*缩放控件type有四种类型:
  BMAP_NAVIGATION_CONTROL_SMALL:仅包含平移和缩放按钮;BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮;BMAP_NAVIGATION_CONTROL_ZOOM:仅包含缩放按钮*/
    map.addControl(top_left_control);        
    map.addControl(top_left_navigation);     
    map.addControl(top_right_navigation);
    // 搜索
  // var local = new BMap.LocalSearch(map, {
  //  renderOptions:{map: map}
  // });
  // local.search("火车站");
</script>
相关文章
|
2月前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
1月前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
46 12
|
2月前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
|
2月前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
|
2月前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
2月前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
2月前
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
|
2月前
|
JavaScript 前端开发 API
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
|
2月前
|
JSON JavaScript API
深入浅出Node.js:从零开始构建RESTful API
【10月更文挑战第39天】 在数字化时代的浪潮中,API(应用程序编程接口)已成为连接不同软件应用的桥梁。本文将带领读者从零基础出发,逐步深入Node.js的世界,最终实现一个功能完备的RESTful API。通过实践,我们将探索如何利用Node.js的异步特性和强大的生态系统来构建高效、可扩展的服务。准备好迎接代码和概念的碰撞,一起解锁后端开发的新篇章。
|
2月前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
58 4