百度地图和高德地图的API视频教程

最新推荐文章于 2023-09-07 15:47:51 发布

转载最新推荐文章于 2023-09-07 15:47:51 发布 · 913 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/haima/p/9343657.html

文章标签：

#前端 #javascript #php #ViewUI

本文档详细介绍如何使用百度地图API实现地图展示与交互功能。包括JS引入百度地图的方法、设置地图中心点、添加地图控件等内容，并通过具体案例演示地图在不同场景的应用。

学习地址:

http://www.houdunren.com/houdunren18_lesson_152?vid=10228

素材地址:

https://gitee.com/houdunwang/video

第二课:学习笔记:

一.js引入百度地图

http://lbsyun.baidu.com/index.php?title=jspopular/guide/show

登陆上面的网址

创建一个浏览器端应用

获取自己的密钥

二.写html代码

三.设置显示中心点方法一:

效果:

设置显示中心点方法二:

 1 <!DOCTYPE html>
 2 <html>  3 <head>  4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  5 <meta charset="utf-8">  6 <title>百度api</title>  7 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nGt7wwtbLb4NrZDlgSobB9d7RdIeWvUD"></script>  8  9 <style type="text/css"> 10  html,body,#app{ 11  height:80%; 12  width:80%; 13  overflow:hidden; 14 } 15 16 </style> 17 </head> 18 <body> 19 <div id="app"> 20 21 </div> 22 </body> 23 <script type="text/javascript"> 24 var map = new BMap.Map("app"); // 创建地图实例 25 // 创建点坐标 26  map.centerAndZoom('淮南'); // 初始化地图，设置中心点坐标和地图级别 27  map.addControl(new BMap.MapTypeControl()); //添加地图的控件 28 // map.setCurrentCity('上海'); //设置地图显示的城市 29  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 30 </script> 31 </html>