html页面中引用百度地图接口

来源：互联网发布：java 7并发编程实战编辑：程序博客网时间：2024/05/21 06:14

引用百度地图接口

具体函数代码如下所示：

//判断用户是否在线

var x = navigator.onLine;

if (x) {

// 百度地图API功能

var map = new BMap.Map("allmap");

var point = new BMap.Point(104.764, 28.090); // 创建点坐标

map.centerAndZoom(point, 6);

//自定义添加缩放控件（放大）

function ZoomControl() {

// 设置默认停靠位置和偏移量

this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;

this.defaultOffset = new BMap.Size(10, 10);

}

// 通过 JavaScript 的 prototype 属性继承于 BMap.Control

ZoomControl.prototype = new BMap.Control();

ZoomControl.prototype.initialize = function (map) {

// 创建一个 DOM 元素

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

// 添加文字说明

div.appendChild(document.createTextNode("放大 4 级"));

// 设置样式

div.style.cursor = "pointer";

div.style.border = "1px solid gray";

div.style.backgroundColor = "white";

// 绑定事件，点击一次放大四级（如果缩放等级大于10就禁用）

div.onclick = function (e) {

if (map.getZoom() < 10) {

map.setZoom(map.getZoom() + 4);

}

// 添加 DOM 元素到地图中

map.getContainer().appendChild(div);

return div;

}

//自定义添加缩放控件（缩小）

function ZoomControl1() {

this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;

this.defaultOffset = new BMap.Size(10, 30);

}

ZoomControl1.prototype = new BMap.Control();

ZoomControl1.prototype.initialize = function (map) {

// 创建一个 DOM 元素

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

// 添加文字说明

div.appendChild(document.createTextNode("缩小 4 级"));

// 设置样式

div.style.cursor = "pointer";

div.style.border = "1px solid gray";

div.style.backgroundColor = "white";

// 绑定事件，点击一次放大两级(如果缩放等级小于6就禁用)

div.onclick = function (e) {

if (map.getZoom() > 6) {

map.setZoom(map.getZoom() - 4);

}

// 添加 DOM 元素到地图中

map.getContainer().appendChild(div);

return div;

}

//自定义添加缩放控件（缩小）

function ZoomControlBtn() {

this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;

this.defaultOffset = new BMap.Size(10, 30);

}

ZoomControlBtn.prototype = new BMap.Control();

ZoomControlBtn.prototype.initialize = function (map) {

// 创建一个 DOM 元素

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

// 添加文字说明

div.appendChild(document.createTextNode("跳过地图"));

// 设置样式

div.style.cursor = "pointer";

div.style.border = "1px solid gray";

div.style.backgroundColor = "white";

// 绑定事件，点击一次放大两级(如果缩放等级小于6就禁用)

div.onclick = function (e) {

window.location.href = "kuangview.aspx";

}

// 添加 DOM 元素到地图中

map.getContainer().appendChild(div);

return div;

}

//添加两个自定义的缩放控件

var myZoomCon = new ZoomControl();

var myZoomCon1 = new ZoomControl1();

var myZoomConBtn = new ZoomControlBtn();

map.addControl(myZoomCon);

map.addControl(myZoomCon1);

map.addControl(myZoomConBtn);

//map.addControl(new BMap.ZoomControl()); //添加地图缩放控件

//var marker = new BMap.Marker(new BMap.Point(104.067, 30.679)); // 添加标注28.0420990000,104.5884330000

//var marker = new BMap.Marker(new BMap.Point(104.764, 28.090));

//map.addOverlay(marker); // 把标注添加到地图上

// 定义自定义覆盖物的构造函数

function SquareOverlay(center, length, width, color) {

this._center = center;

this._length = length;

this._width = width;

this._color = color;

}

// 继承API的BMap.Overlay

SquareOverlay.prototype = new BMap.Overlay();

// 实现初始化方法

SquareOverlay.prototype.initialize = function (map) {

// 保存map对象实例

this._map = map;

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

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

div.style.position = "absolute";

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

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

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

div.style.background = this._color;

var span = this._span = document.createElement("span");

div.appendChild(span);

span.appendChild(document.createTextNode("船景煤矿"));

var arrow = this._arrow = document.createElement("div");

//arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";

arrow.style.background = "url(images/label.png) no-repeat";

arrow.style.position = "absolute";

arrow.style.width = "11px";

arrow.style.height = "10px";

arrow.style.top = "22px";

arrow.style.left = "10px";

arrow.style.overflow = "hidden";

div.appendChild(arrow);

// 将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);

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

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

}

//添加自定义覆盖物

var mySquare = new SquareOverlay(map.getCenter(), 70, 23, "#EE5D5B");

map.addOverlay(mySquare);

// 这几句话是为自定义的覆盖物添加单击事件

//但是在手机端的话覆盖物的单击事件会被认为是地图的单击事件、

// 所以用touchstart方法模拟，在这之前

/*iPhone上的自定义覆盖物事件默认会触发map的click事件，如果map定义了click事件的话，自定义覆盖物的click事件也会被动触发。具体实现方法可以把自定义覆盖物的click事件改成touchstart或者touchend移动触摸事件，提前map.click事件执行（因为click事件在移动端会延迟个大概300毫秒，具体原因不在这详述，请自行Google），这个时候可以先设置tmpfun = map.onclick;map.onclick = null;在touch事件内设置map.onclick = tmpfun;这样就因为触发了map.click从而变相的触发自定义覆盖物的click事件，但并没有触发map.click“事件”。*/

tmpfun = map.onclick;

map.onclick = null;

SquareOverlay.prototype.addEventListener = function (event, fun) {

this._div['on' + event] = fun;

}

mySquare.addEventListener("touchstart", function () {

map.onclick = tmpfun;

window.location.href = "http://127.0.0.1/login.aspx";

//alert("click");

});

0 0