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

随机推荐

洛谷—— P1977 出租车拼车
https://www.luogu.org/problem/show?pid=1977 题目背景话说小 x 有一次去参加比赛,虽然学校离比赛地点不太远,但小 x 还是想坐出租车去.大学城的出租车总 ...
Eclipse移植项目时JDK版本不匹配Project facet Java version 1.7 is not supported
Eclipse移植项目时JDK版本不匹配Project facet Java version 1.7 is not supported 如果原有项目用的为JDK1.7,而自己的是低版本JDK,比如1. ...
@Aspect注解无效
Pointcut的execution配置正确的话,检查下,是否加了以下jar包 <!-- http://mvnrepository.com/artifact/org.aspectj/aspect ...
FIREDAC连MYSQL中文乱码的解决办法
FIREDAC连MYSQL中文会乱码,因为字符集的原因,字符集设为gb2312以后,不再乱码. if SameText(DatabaseParams.driveId, 'MySQL') then fd ...
centos No module named setuptools解决方案
wget http://pypi.python.org/packages/source/s/setuptools/setuptools-0.6c11.tar.gz tar zxvf setuptool ...
Android 怎样查看系统的memory swap 资讯/信息
前言欢迎大家我分享和推荐好用的代码段~~ 声明欢迎转载,但请保留文章原始出处: CSDN:http://www.csdn.net ...
微信小程序项目实战（三）list 列表页及 item 详情页
1.项目结构 2.list 列表页 (1)数据(逻辑) list.js // pages/list/list.js Page({ /** * 页面的初始数据 */ data: { title: '加载 ...
重载和重写在jvm运行中的区别（一）
1.重载(overload)方法对重载方法的调用主要看静态类型,静态类型是什么类型,就调用什么类型的参数方法. 2.重写(override)方法对重写方法的调用主要看实际类型.实际类型如果实现了该 ...
XxPay支付系统-boot版本使用
https://segmentfault.com/a/1190000016987391?utm_source=tag-newest 有三个版本: spring boot 版本: spring clou ...
Node 即学即用笔记思维导图
Node即学即用 REPL(Read-Evaluate-Print-Loop) console.log .clear .help .exit require('http') ...

百度地图API详细介绍

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

随机推荐

热门专题