百度地图API的简单使用

男娘i 2021-07-26 12:27 517阅读 0赞

jsdemo：[http://lbsyun.baidu.com/jsdemo.htm\#a1\_2][http_lbsyun.baidu.com_jsdemo.htm_a1_2]

<!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="//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");    // 创建Map实例
    	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    	//添加地图类型控件
    	map.addControl(new BMap.MapTypeControl({
    		mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));	  
    	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      
      //创建小狐狸
    	var pt = new BMap.Point(116.017, 39.909);
    	var myIcon = new BMap.Icon("/jsdemo/img/fox.gif", new BMap.Size(300,157));
    	var marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    	map.addOverlay(marker);   
      
      //创建小狐狸
    	var pt2 = new BMap.Point(116.417, 39.409);
    	var myIcon = new BMap.Icon("/jsdemo/img/fox.gif", new BMap.Size(300,157));
    	var marker2 = new BMap.Marker(pt2,{icon:myIcon});  // 创建标注
    	map.addOverlay(marker2);  
    </script>

[http_lbsyun.baidu.com_jsdemo.htm_a1_2]: http://lbsyun.baidu.com/jsdemo.htm#a1_2

发表评论取消回复

表情：

评论列表（有 0 条评论，517人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图API使用记录

背景：最近需要开发一个使用到地图的网站，对百度地图API做了些研究，记录如下使用方法： 1.引入百度脚本 <span style="

逃离我推掉我的手/ 2022年08月05日 08:16/ 0 赞/ 306 阅读

相关如何使用百度地图API

首先你要先去百度地图开发者平台去注册一个开发者账号然后要获取AK密钥获取之后再HTML网页了引入就好了 <script src="http://api.map

你的名字/ 2022年06月11日 09:15/ 0 赞/ 330 阅读

相关 js 百度地图api

[百度地图JavaScript API][JavaScript API]是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支

拼搏现实的明天。/ 2022年06月10日 03:51/ 0 赞/ 324 阅读

相关 js+百度地图API

js与百度地图API实例： <div id='address'></div> <script src="http://api.map.baidu.com/ap

旧城等待，/ 2022年04月16日 03:59/ 0 赞/ 373 阅读

相关 JAVA 百度地图 API

唉。。已经无力吐槽废话。。直接进入正题吧。。第一次写。。如有不足之处请谅解。。哦对了。。我们这个是 web 端获取 API 的官方文档：[http://lbsyun.ba

你的名字/ 2022年02月24日 12:58/ 0 赞/ 535 阅读

相关百度地图Javascript API使用详解

首先登录百度地图开发平台：[http://lbsyun.baidu.com/][http_lbsyun.baidu.com] ![watermark_type_ZmFuZ3p

客官°小女子只卖身不卖艺/ 2021年11月08日 16:20/ 0 赞/ 510 阅读

相关 VUE之使用百度地图API

利用vue创建点餐系统，在点餐系统中需要知道商家地址信息，这时就需要借用百度地图API。步骤一：申请百度地图密钥；步骤二：在index.htm

深碍√TFBOYSˉ_/ 2021年09月29日 09:14/ 0 赞/ 500 阅读

相关百度地图API实现地图应用

企业官网上需要用到地图应用，这里对百度地图API的使用做点笔记，好记性不如烂笔头。实现地图应用的流程如下： 1、获取密钥；教程网址 [https://jingyan.ba

灰太狼/ 2021年09月18日 10:22/ 0 赞/ 729 阅读

相关百度地图API 加载百度地图

前言百度地图在日常生活中应用的越来越多，功能也日渐丰富，我们可以使用ArcGIS JS API加载在线百度地图（[https://blog.csdn.net/i

布满荆棘的人生/ 2021年09月15日 02:50/ 0 赞/ 746 阅读

相关百度地图API的简单使用

jsdemo：[http://lbsyun.baidu.com/jsdemo.htm\a1\_2][http_lbsyun.baidu.com_jsdemo.htm_a1_2]

男娘i/ 2021年07月26日 12:27/ 0 赞/ 518 阅读