百度api 标注中html,百度地图Api进阶教程-创建标注和自定义标注3.html

百度地图

function initialize() {

//---------------------------------------------基础示例---------------------------------------------

var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20}); // 创建Map实例

//map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //初始化时，即可设置中心点和地图缩放级别。

map.centerAndZoom("成都",13); // 初始化地图,设置中心点坐标和地图级别。

map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动

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

document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat;

});

//---------------------------------------------遮盖物---------------------------------------------

var point = new BMap.Point(104.117287, 30.685906);//默认

// 创建标注对象并添加到地图

var marker = new BMap.Marker(point);

map.addOverlay(marker);

var point = new BMap.Point(104.057287, 30.685906);//图片

var myIcon = new BMap.Icon("http://t3.baidu.com/it/u=1119318591,884730191&fm=0&gp=0.jpg", new BMap.Size(55, 55));

// 创建标注对象并添加到地图

var marker = new BMap.Marker(point, {icon: myIcon});

map.addOverlay(marker);

//自定义遮盖物

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

var point = new BMap.Point(104.117287, 30.695906);//自定义遮盖物

function SquareOverlay(point, length, color){

this._point = point;

this._length = length;

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._length + "px";

div.style.background = this._color;

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

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

// 保存div实例

this._div = div;

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

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

return div;

}

// 实现绘制方法 (您需要在draw方法中设置覆盖物的位置，每当地图状态发生变化(比如：位置移动、级别变化)时，API都会调用覆盖物的draw方法，用于重新计算覆盖物的位置)

SquareOverlay.prototype.draw = function(){

var position = map.pointToOverlayPixel(this._point);

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";

}

}

// 添加自定义覆盖物

var mySquare = new SquareOverlay(point, 22, "red");

map.addOverlay(mySquare);

}

function loadScript() {

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

script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";

document.body.appendChild(script);

}

window.onload = loadScript;

打印坐标

// 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));

// map.setZoom(14); //放到到14级