百度地图显示标记-白红宇

百度地图显示标记

阅读量：5986 次

发布时间：2019-06-20

本文共 3153 字，大约阅读时间需要 10 分钟。

//地图css

html,

body,

#dituContent {

width: 100%;

height: 100%;

margin: auto;

padding: 0;

border: #ccc solid 1px;

}

</style>

<body>

//地图显示页面

</body>

//创建和初始化地图函数：

function initMap() {

createMap(); //创建地图

setMapEvent(); //设置地图事件

addMapControl(); //向地图添加控件

addMarker(); //向地图中添加marker

}

//创建地图函数：

function createMap() {

var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图

var point = new BMap.Point(104.081727, 30.591504); //定义一个中心点坐标

map.centerAndZoom(point, 16); //设定地图的中心点和坐标并将地图显示在地图容器中

window.map = map; //将map变量存储在全局

}

// //地图事件设置函数：

function setMapEvent() {

map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)

map.enableScrollWheelZoom(); //启用地图滚轮放大缩小

map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)

map.enableKeyboard(); //启用键盘上下左右键移动地图

}

//地图控件添加函数：

function addMapControl() {

// //向地图中添加缩放控件

var ctrl_nav = new BMap.NavigationControl({

anchor: BMAP_ANCHOR_TOP_LEFT,

type: BMAP_NAVIGATION_CONTROL_LARGE

});

map.addControl(ctrl_nav);

// //向地图中添加缩略图控件

var ctrl_ove = new BMap.OverviewMapControl({

anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

isOpen: 1

});

map.addControl(ctrl_ove);

//向地图中添加比例尺控件

var ctrl_sca = new BMap.ScaleControl({

anchor: BMAP_ANCHOR_BOTTOM_LEFT

});

map.addControl(ctrl_sca);

}

//标注点数组

var markerArr = [{

title: "输电项目一",

content: "成都项目",

point: "104.086033|30.594115",

isOpen: 0,

icon: {

w: 21,

h: 21,

l: 0,

t: 0,

x: 6,

lb: 5

}

}];

//创建marker

function addMarker() {

for(var i = 0; i < markerArr.length; i++) {

var json = markerArr[i];

var p0 = json.point.split("|")[0];

var p1 = json.point.split("|")[1];

var point = new BMap.Point(p0, p1);

var iconImg = createIcon(json.icon);

var marker = new BMap.Marker(point, {

icon: iconImg

});

var iw = createInfoWindow(i);

var label = new BMap.Label(json.title, {

"offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)

});

marker.setLabel(label);

map.addOverlay(marker);

label.setStyle({

borderColor: "#808080",

color: "#333",

cursor: "pointer"

});

(function() {

var index = i;

var _iw = createInfoWindow(i);

var _marker = marker;

_marker.addEventListener("click", function() {

this.openInfoWindow(_iw);

});

_iw.addEventListener("open", function() {

_marker.getLabel().hide();

})

_iw.addEventListener("close", function() {

_marker.getLabel().show();

})

label.addEventListener("click", function() {

_marker.openInfoWindow(_iw);

})

if(!!json.isOpen) {

label.hide();

_marker.openInfoWindow(_iw);

}

})()

}

// 创建InfoWindow

function createInfoWindow(i) {

var json = markerArr[i];

var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");

return iw;

}

//创建一个Icon

function createIcon(json) {

var icon = new BMap.Icon("../images/icon.png", new BMap.Size(json.w, json.h), {

imageOffset: new BMap.Size(-json.l, -json.t),

infoWindowOffset: new BMap.Size(json.lb + 5, 1),

offset: new BMap.Size(json.x, json.h)

})

return icon;

}

initMap(); //创建和初始化地图

</script>

转载于:https://my.oschina.net/u/2428630/blog/712169

你可能感兴趣的文章

linux c 之signal 和sigaction区别

查看>>

使用CNN（convolutional neural nets）关键的一点是检测到的面部教程（四）:学习率，学习潜能，dropout...

查看>>

六款主流免费网络嗅探软件wireshark,tcpdump,dsniff,Ettercap,NetStumbler

查看>>

Android Game

查看>>

Hadoop入门进阶课程1--Hadoop1.X伪分布式安装

查看>>

POJ 3691 DNA repair 基于AC自己主动机DP

查看>>

[ios]Xcode常用快捷键

查看>>

（剑指Offer）面试题15：链表中倒数第k个结点

查看>>

[地图代数]处理DEM中的高程异常值——ArcGIS栅格计算的应用

查看>>

【LeetCode从零单排】No189 .Rotate Array

Spark通过YARN提交任务不成功（包含YARN cluster和YARN client)

查看>>

Win10系列：C#应用控件基础7

查看>>

PowerDesigner导出word，PowerDesigner把表导出到word，PDM导出word文档