百度地图API详细介绍

<!DOCTYPE html>

<html>

<head>

html, body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

#map {

width: 100%;

height: 100%;

}

.btn-twinkle {

color: #fff;

border: none;

animation: twinkle 0.1s alternate infinite;

}

@keyframes twinkle {

from {

background: #F3F1EC;

}

to {

background: #FF0000;

}

</style>

</head>

<body>

function SquareOverlay(Id, color, x, y) {

// this._center = center;

// this._length = length;

this._length = 10;

this._color = color;

this._x = x;

this._y = y;

this._Id = Id;

}

// 继承API的BMap.Overlay

SquareOverlay.prototype = new BMap.Overlay();

// 实现初始化方法

SquareOverlay.prototype.initialize = function (map) {

// 保存map对象实例

this._map = map;

// 创建div元素，作为自定义覆盖物的容器

var div = document.createElement("canvas");

div.style.position = "absolute";

// 可以根据参数设置元素外观

div.style.width = this._length + "px";

div.style.height = this._length + "px";

div.style.background = this._color;

div.style.borderRadius = this._length / 2 + "px";

div.style.border = "solid rgb(" + this._length + "," + this._length + "," + this._length + ") 1px";

div.id = this._Id;

if (this._color == "red") {

div.className = "btn-twinkle";

}

div.onclick = function (e) {

debugger;

// map.openInfoWindow(new BMap.InfoWindow("地址：济南邦德激光股份公司", opts), new BMap.Point('117.684667', '36.233654')); //开启信息窗口

debugger;

var p = new BMap.Point('117.684667', '36.233654');

//var p1 = map.overlayPixelToPoint(e.screenX, e.screenY);

//var p2 = map.pixelToPoint(e.pageX, e.pageY);

map.openInfoWindow(new BMap.InfoWindow("地址：济南邦德激光股份公司", opts), p); //开启信息窗口

};

// 将div添加到覆盖物容器中

map.getPanes().markerPane.appendChild(div);

// 保存div实例

this._div = div;

// 需要将div元素作为方法的返回值，当调用该覆盖物的show、

// hide方法，或者对覆盖物进行移除时，API都将操作此元素。

return div;

}

//实现绘制方法

SquareOverlay.prototype.draw = function () {

// 根据地理坐标转换为像素坐标，并设置给容器

// var position = this._map.pointToOverlayPixel(this._center);

var position = this._map.pointToOverlayPixel(new BMap.Point(this._x, this._y));

this._div.style.left = position.x - this._length / 2 + "px";

this._div.style.top = position.y - this._length / 2 + "px";

}

// 实现显示方法

SquareOverlay.prototype.show = function () {

if (this._div) {

this._div.style.display = "";

}

// 实现隐藏方法

SquareOverlay.prototype.hide = function () {

if (this._div) {

this._div.style.display = "none";

}

// 添加自定义方法

SquareOverlay.prototype.toggle = function () {

if (this._div) {

if (this._div.style.display == "") {

this.hide();

}

else {

this.show();

}

// 百度地图API功能

var map = new BMap.Map("map", {

enableMapClick: false

}); // 创建Map实例

map.centerAndZoom(new BMap.Point(105.403119, 38.028658),6); // 初始化地图,设置中心点坐标和地图级别

map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

map.setMapStyle({

style: 'midnight'

});

debugger;

var opts = {

width: 200, // 信息窗口宽度

height: 100, // 信息窗口高度

title: "济南邦德激光股份公司", // 信息窗口标题

enableMessage: true,//设置允许信息窗发送短息

message: "做民族激光领导者"

};

// var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象

// 添加自定义覆盖物

map.addOverlay(new SquareOverlay('1', "red", '117.684667', '36.233654'));

map.addOverlay(new SquareOverlay('2', "red", '107.644227', '35.726801'));

map.addOverlay(new SquareOverlay('3', "red", '106.530635', '29.544606'));

map.addOverlay(new SquareOverlay('4', "yellow", '123.987289', '47.3477'));

map.addOverlay(new SquareOverlay('5', "green", '91.750644', '29.229027'));

map.addOverlay(new SquareOverlay('6', "black", ' 85.614899', '42.127001'));

map.addOverlay(new SquareOverlay('7', "red", '37.615979', '55.742769'));

map.addOverlay(new SquareOverlay('8', "red", '-121.326863', '38.377087'));

map.addOverlay(new SquareOverlay('9', "red", '135.574686', '34.330914'));

map.addOverlay(new SquareOverlay('10', "red", '73.870152', '33.502642'));

//单击获取点击的经纬度（以此来定位外国收费的地点）

map.addEventListener("click", function (e) {

alert(e.point.lng + "," + e.point.lat);

//var x = e.point.lng;

//var y = e.point.lat;

//var str = String(x) + String(y)

//alert(str);

//var pv = new BMap.Point(e.point.lng, e.point.lat);

//var optsv = {

// width: 200, // 信息窗口宽度

// height: 100, // 信息窗口高度

// title: str, // 信息窗口标题

// enableMessage: true,//设置允许信息窗发送短息

// message: "" + str.toString() + ""

//};

//map.openInfoWindow(new BMap.InfoWindow("地点经纬度：", optsv), pv); //开启信息窗口

});

//国内根据地点名称查找经纬度

$.ajax({

type: "GET",

url: "../Home/getPoint",

data: {},

dataType: "json",

success: function (result) {

debugger;

var data = eval(result);

//alert(data.result.location);

//alert(data.result.location.lat);

//alert(data.result.location.lng);

map.addOverlay(new SquareOverlay('7', "red", data.result.location.lng, data.result.location.lat));

}

});

</script>

</body>

</html>

百度地图API详细介绍的更多相关文章

百度地图API使用介绍
百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...
Qt开发北斗定位系统融合百度地图API及Qt程序打包发布
Qt开发北斗定位系统融合百度地图API及Qt程序打包发布 1.上位机介绍最近有个接了一个小型项目,内容很简单,就是解析北斗GPS的串口数据然后输出经纬度,但接过来觉得太简单,就发挥了主观能动性,增加 ...
【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍
原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...
网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...
吐槽贴：百度地图 api 封装的实用功能 [源码下载]
ZMap 类功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...
***微信LBS地理位置开发+百度地图API(地理位置和坐标转换)
微信公众平台开发 - 获取用户地理位置本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能. 一.获取用户地理位置接口开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会 ...
百度地图API开发指南
简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...
Android端百度地图API使用详解
百度地图API简介百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...
【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离
原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...

随机推荐

P1455 搭配购买
洛谷——P1455 搭配购买题目描述明天就是母亲节了,电脑组的小朋友们在忙碌的课业之余挖空心思想着该送什么礼物来表达自己的心意呢?听说在某个网站上有卖云朵的,小朋友们决定一同前往去看看这种神奇的商 ...
java实验（三）——课堂小测
这次的课堂小测是用以前生成的那些四则运算的代码,然后将这些题目写到一个文件中,再通过这个文件读取题目的信息,每读入一个答案的时候,遇到星号的时候,等待用户输入然后判断输入的答案是否正确,然后输出小一道 ...
SpringMVC get请求中文乱码
针对GET请求的编码问题,则需要改tomcat的server.xml配置文件,如下: 原 <Connector connectionTimeout="20000" port= ...
GPIO简介
GPIO(General Purpose I/O Ports)意思为通用输入/输出端口,通俗地说,就是一些引脚,可以通过它们输出高低电平或者通过它们读入引脚的状态-是高电平或是低电平. GPIO口一是 ...
Android中传递对象的三种方法
Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! Android中,Activity和Fragment之间传递对象,可以通过将对象序列化并存入Bundle或者I ...
【Nginx】Nginx基础架构
调用HTTP模块的流程: Worker进程会在一个for循环语句中反复调用事件模块检测网络事件.当事件模块检测到某个客户端发起的TCP请求时(接收到SYN包),将会为它建立TCP连接,成功建立连接后根 ...
支付宝移动支付之IOSApp调用支付宝钱包
近期客户提出要开发一个IOS上的app作为訪问他们站点的途径之中的一个.为什么说之中的一个呢.因为眼下PC和Mobile这两个站眼下都已经上线了. 所以问题就简单了,我们仅仅须要把mobile站UI改 ...
Navicat for MySQL如何导入SQL文件
1 新建一个数据库,字符集和排序规格如下 2 打开这个数据库,然后运行SQL文件即可 3 刷新一下所有表就出来了
Leetcode--easy系列10
#205 Isomorphic Strings Given two strings s and t, determine if they are isomorphic. Two strings are ...
鸟哥的Linux私房菜-----13、账号管理

百度地图API详细介绍

百度地图API详细介绍的更多相关文章

随机推荐

热门专题