百度地图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. ...

随机推荐

Codeforces Round #291 (Div. 2) B. Han Solo and Lazer Gun
因为是x,y均为整数因此对于同一直线的点,其最简分数x/y是相同的(y可以为0,这里不做除法)于是将这些点不断求最简分数用pair在set中去重即可. #include <cmath> # ...
IDEA添加作者注释
1.打开IDEA的settings,然后在Editor下找到File and Code Templates 2.然后选择File Header 选择需要注释的的格式即可.
10-JS的函数学习
<html> <head> <title>js的函数学习</title> <meta charset="UTF-8"/> ...
java基础 2 static关键字
2. static关键字变量:静态变量在内存中只存在一份,只在类第一次实例化时初始化一次,同时类所有的实例都共享静态变量,可以直接同过类名来访问他. 方法:静 ...
PCRE函数简介和使用示例
PCRE是一个NFA正则引擎,不然不能提供完全与Perl一致的正则语法功能.但它同时也实现了DFA,只是满足数学意义上的正则. PCRE提供了19个接口函数,为了简单介绍,使用PCRE内带的测试程序( ...
ArcGIS engine中Display类库——Display
转自原文 ArcGIS engine中Display类库——Display Display类库包括了用于显示GIS数据的对象.除了负责实际输出图像的主要显示对象(display object)外,这 ...
MAC上反编译android apk---apktool, dex2jar, jd-jui安装使用(含手动签名)
前文介绍了在Windows平台利用强大的APK-Multi-Tool进行反编译apk,修改smali源码后再回编译成apk的流程,最近受人之托,破解个apk,所幸的是所用到的这三个软件都是跨平台的, ...
DosBox 报错 this program requires dosxnt.exe to be in your path
也就是少了dosxnt.exe文件,能够上网搜索下载,把dosxnt 拷贝到你挂截文件夹下就能够执行 Dosxnt文件下载
3.将maven项目jar纳入maven仓库，Mave项目依赖另外一个Maven项目的案例
1 若想让maven项目依赖另外一个maven项目.被依赖的项目要在maven仓库中有对应的jar包,所以要对依赖的项目运行mvninstall命令. 2 新建第二个项目模块HelloFrien ...
JavaSE----API之集合（Collection、List及其子类、Set及其子类、JDK1.5新特性）
5.集合类集合类的由来: 对象用于封装特有数据,对象多了须要存储:假设对象的个数不确定.就使用集合容器进行存储. 集合容器由于内部的数据结构不同,有多种详细容器.不断的向上抽取,就形成了集合框架. ...

百度地图API详细介绍

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

随机推荐

热门专题