百度地图API-javascript-web地图的应用
html部分的代码
<div class="maxwidth">
<div class="address clearfix">
<div class="map-box fl">
<div id="allmap"></div>
</div>
<div class="maptitle fr">
<span>建和塑胶材料有限公司</span>
<p>联系人:胡先生</p>
<p>电子邮箱:hudb@pvc123.com</p>
<p>联系地址:东莞市南城区高盛科技大厦5楼</p>
<div class="qqinline">
<a href="#">QQ在线咨询</a>
</div>
</div>
<div class="mapimg fr">
<img src="../static/conaaa.png" />
</div>
</div>
<div class="hot">
<img src="../static/hot.jpg" />
</div>
</div>
css部分代码
.maxwidth{width:1200px;margin:0px auto;}
/*map*/
.map-box{background-color:#fff;width:750px;height:538px;border:1px solid #eee;}
#allmap{width:730px;height:518px;margin:10px;}
span.BMap_Marker label.BMapLabel{border:1px solid #000;border-radius: 3px;}
/*map end*/
js部分代码
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=nbAwc69Hb3sgKdGHko1HWhSP&v=2.0"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(113.732756,22.992607);
map.centerAndZoom(point, 19);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var label = new BMap.Label("建和塑胶材料有限公司",{offset:new BMap.Size(20,-10)});
label.setStyle({
borderColor : "black"
});
//marker.addEventListener("click", function(){ //点击弹出可去掉注释
marker.setLabel(label); //开启信息窗口
//}); //点击弹出可去掉注释
</script>
效果图如下:
写地图巨有用的地址mark:
百度地图生成器
http://api.map.baidu.com/lbsapi/creatmap/index.html
百度地图拾取坐标系统
http://api.map.baidu.com/lbsapi/getpoint/index.html
百度地图JavaScript API
http://lbsyun.baidu.com/index.php?title=jspopular
百度地图API-javascript-web地图的应用的更多相关文章
- PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例
原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程序--> <!DOCTYPE html> <html&g ...
- 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...
- 高德地图 API JavaScript API
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx ...
- 如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 百度地图API,展示地图和添加控件
1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...
- HTM L百度地图API 自定义工具地图实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
- 使用百度地图API进行Android地图应用开发(Eclipse)
随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...
- 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图API开发----手机地图做导航功能
第一种方式:手机网页点击打开直接进百度地图APP <a href="baidumap://map/direction?mode=[transit:公交,driving:驾车]& ...
随机推荐
- wampserver 的Apache启动错误提示:The requested URL / was not found on this server.
打开localhost显示以下错误 原因:之前我配置了虚拟主机,所以服务器是从虚拟环境访问的,localhost也就访问不到 解决方法:打开httpd.conf配置文件,将Include conf/e ...
- Codeforce C. Bus
C. Bus time limit per test 2 seconds memory limit per test 256 megabytes input standard input output ...
- hexo 博客支持PWA和压缩博文
目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # offline config passed ...
- 19_Python元组总结
元组 1 元组:不可变的容器,一旦初始化就不能更改,有索引:可以查,不能增,改,删除单个元素:可遍历,不能排序 2 当元组元素,只有一个的时候,需要在元素后加",",否则回当()运 ...
- 史上最全的JFinal源码分析(不间断更新)
打算 开始 写 这么 一个系列,希望 大家 喜欢,学习 本来就是 一个查漏补缺的过程,希望大家能提出建议.本篇 文章 是整个目录的向导,希望 大家 喜欢.本文 将以 包的形式跟大家做向导. Handl ...
- 闭包(流畅的python 学习笔记)
什么是闭包 其实,闭包指延伸了作用域的函数,其中包含函数定义体中引用.但是不在定义体中定义的非全局变量.函数是不是匿名的没有关系,关键是它能访问定义体之外定义的非全局变量. 示例 7-8 averag ...
- iOS-电子书开发 笔记
前言 刚接手电子书项目时,和安卓开发者pt Cai老师[aipiti Cai,一个我很敬佩很资深的开发工程师,设计领域:c++.Java.安卓.QT等]共同商议了一下,因为项目要做要同步,移动端[手机 ...
- 洛谷 [P3398] 仓鼠找sugar
树剖求LCA 我们可以发现,两条路径ab,cd相交,当且仅当 dep[lca(a,b)]>=dep[lca(c,d)]&(lca(lca(a,b),c)==lca(a,b)||lca(l ...
- CF 375D. Tree and Queries加强版!!!【dfs序分块 大小分类讨论】
传送门 题意: 一棵树,询问一个子树内出现次数$\ge k$的颜色有几种,Candy?这个沙茶自带强制在线 吐槽: 本来一道可以离散的莫队我非要强制在线用分块做:上午就开始写了然后发现思路错了...: ...
- ElasticSearch安装中遇到的一些问题
前段时间部署ElasticSearch,现把安装中遇到的一些问题和注意细节与大家分享一下. 系统:CentOS7.2 0.安装JDK 8,配置环境变量 官网下载地址:http://www.oracle ...