一、说明

通过HTML调用百度地图API，在指定位置显示出地图，并且在目标位置标注，标注中显示具体位置和目标地址。（效果图如下）

二、代码

<!-- 以上效果图代码 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>地图点击查看详情界面</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><style>body,html,#container {overflow: hidden;width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}</style><script src="//api.map.baidu.com/api?type=webgl&v=1.4&ak=您的密钥"></script></head>
<body><div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.85,39.85);
map.centerAndZoom(point, 5);
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
// 创建信息窗口
var opts = {width: 200,height: 100,title: '北京市',
};
var infoWindow = new BMapGL.InfoWindow('地址：北京市xxxxxxx', opts);
// 点标记添加点击事件
map.openInfoWindow(infoWindow,map.getCenter());
marker.addEventListener('click', function () {map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
</script>

总结

以上就是今天要讲的内容，，大家可以在获取密钥后，直接复制粘贴到编译器，即可访问。

关于密钥，首先得有一个百度账号，然后点击我上面发的那个链接，没错看标题：JavaScript API大众版就是它，进去我们看左上角会有一个获取密钥的链接，我们点一下。获取成功以后，我们点击创建应用，随便填就可以的。这时在查看应用里面，我找到“访问应用（AK）”所对应的一段密钥，复制粘贴到代码第七行对应的位置。此时打开编写好的html页面就可以显示地图的信息了。

HTML调用百度地图API，实现地图标注位置相关推荐

百度地图api 点击标注后跳转页面
百度地图api 点击标注跳转页面初始化地图 window.onload = function(){//得到所有点,包括点的id.经纬度.跳转地址链接//jd. wd.hrefgetPoints(); ...
php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
Vue 百度地图API实现定位用户位置功能
一.进入百度地图百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 1.1注册登录 1.2进入控制台应用管理->我的应用->创建应用 1.3创建应用填 ...
python调用百度翻译-Python 调用百度翻译API
由于实习公司这边做的是日文app,有时要看看用户反馈,对于我这种五十音图都没记住的人,表示百度翻译确实还可以.但不想每次都复制粘贴啊,google被墙也是挺蛋疼的事,所以用python结合baidu ...
调用百度汇率api 获取各国的汇率值
设置一个定时任务,每天更新汇率java代码如下 package com.thinkgem.jeesite.modules.huiLvApi.service;import java.io.Buffere ...
python百度翻译接口_python3 调用百度翻译API翻译英文
自行申请百度开发者账号import importlib,sys,urllib importlib.reload(sys) import urllib.request import json #导入js ...
【2019-07-23】]python3 把日语翻译为中文调用百度翻译API接口及API申请使用教程
点击申请百度翻译API,得到一个你自己的API账户. 点击查看申请教程,感谢教程原作者. API官网提供了一个python2的使用接口的demo还有详细的解释文档想用python3完成,代码几乎照搬 ...
python + 高德地图API实现地图找房
python + 高德地图API实现地图找房项目简介:根据工作地点信息和58同城爬取的租房信息,通过高德地图进行显示,同时利用高德API自动规划房源到工作地点的通勤路线(公交+地铁) 项目仓库:ht ...
python调用百度接口实现ocr识别_Python 3调用百度OCR API实现剪贴板文字识别
本程序调用百度OCR API对剪贴板的图片文字识别,配合CaptureScreen软件,可快速识别文字. #!python3 import urllib.request, urllib.parse i ...
前端js调用百度翻译api接口
目录 1.到百度翻译开放平台注册自己的账号 2.编辑html代码,设计一个简易的页面 3.远程调用百度翻译api 4.完整代码 5.测试到百度翻译开放平台注册自己的账号 (1)进入网页:开放平台官网 ...

HTML调用百度地图API，实现地图标注位置

HTML调用百度地图API，实现地图标注位置

一、说明

二、代码

总结

HTML调用百度地图API，实现地图标注位置相关推荐

最新文章

热门文章