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

随机推荐

uva live 12846 A Daisy Puzzle Game
假设下一个状态有必败.那么此时状态一定是必胜,否则此时状态一定是必败状压DP #include<iostream> #include<map> #include<str ...
[Angular] Modify User Provided UI with Angular Content Directives
If we’re going to make our toggle accessible, we’ll need to apply certain aria attributes to the con ...
Mybatis加入Ehcache支持
1.Mybatis默认的缓存配置 MyBatis 包括一个很强大的查询缓存特性,它能够很方便地配置和定制. Mybatis缓存包括全局的缓存和局部的缓存.全局的缓存能够讲主配置文件的setting属性 ...
Python第五讲
一.冒泡算法 1.将两个变量的值互换 a1 = 123 a2 = 456 #要想将a1与a2的值进行位置互换需要借助一个中间变量(temp) temp = a1#将a1的值赋值给temp(temp=1 ...
C#/AutoCAD 2018/ObjectArx/二次开发添加圆对象的的例子（五）
C#/AutoCAD 2018/ObjectArx/二次开发添加圆对象的的例子(五) 1.创建一个图形对象的步骤如下见上一篇博客(三)2.添加删除实体的工具函数见上一篇博客(四) 3.添加圆的例子(完 ...
rocketmq消费队列代码
DefaultMQPushConsumer consumer = new DefaultMQPushConsumer(Constant.operationLogGroup); try { consum ...
打造极致性能数据库中间件丨LVS+Keepalive+华为云DDM之理论篇
背景说明华为云分布式数据库中间件(Distributed Database Middleware,简称DDM),专注于解决数据库分布式扩展问题,突破了传统数据库的容量和性能瓶颈,实现海量数据高并发访 ...
poj2488--A Knight's Journey(dfs，骑士问题)
A Knight's Journey Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 31147 Accepted: 10 ...
linux 【第五篇】特殊权限及定时任务
特殊权限 [root@VM_141_154_centos ~]# ls -ld /tmp drwxrwxrwt. 8 root root 4096 Apr 5 08:11 /tmp /tmp/ 公共目 ...
A Simple Example About Privileged Methods in JavaScript
Douglas Crockford classified the "class methods" in JavaScript into three types: private, ...

百度地图API详细介绍

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

随机推荐

热门专题