前言
随着地图的普及，可能也有许多和我一样的初学者，在了解常见的地图控件时花费了很多力气。所以，今天主要分享一些关于地图控件的插件封装。
涉及方向
今天主要以高德地图作为主要的学习方向，随后的分享中也会把百度地图加入。目前我就假设大家都了解过了地图。只是受限于插件的封装等等。本人也学识浅薄，希望有什么问题大家可以指出。以便日后改进。
正题
三个部分
1.地图中marker点以及信息窗体
2.地图中相关控件的实例
3.地图中鼠标样式的切换---最为简单，只是顺带一说。
1.marker点以及信息窗体
效果展示
mark.png
(1)事先我们需要提前准备这样一段css样式
html,
body,
#container {
height: 98%;
width: 100%;
}
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {
height: 2rem;
}
.custom-info {
border: solid 1px silver;
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
}
div.info-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
}
div.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
div.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
div.info-middle {
font-size: 12px;
padding: 10px 6px;
line-height: 20px;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
(2)接下来就是我们需要的js文件
/**
* 放置makeer 带信息提示框
* @param {*} obj 对象形式
* @param {*} obj.how 哪个实例的地图调用
* @param {*} obj.position 地图的定位点 数组形式 [lng,lat]
* @param {*} obj.title 窗体的头部标题
* @param {*} obj.content 窗体的内部信息 数组形式 ex：如果是段落形式，需要将段落分开作为数组元素依次放入。
* @param {*} obj.flag 标记点显示样式 默认false 蓝色
*/
function getAMarker(obj) {
addMarker();
//添加marker标记
function addMarker() {
if (obj.flag) {
var icon = "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
} else {
var icon = "";
}
var marker = new AMap.Marker({
map: obj.how,
position: obj.position,
icon: icon,
});
// 调用设置窗体
var infoWindow = setInfo(obj.title, obj.content)
//鼠标点击marker弹出自定义的信息窗体
AMap.event.addListener(marker, 'click', function () {
infoWindow.open(obj.how, marker.getPosition());
});
}
// 设置我们想要的窗体
function setInfo(title, content) {
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow(title, content.join("<br/>")),
offset: new AMap.Pixel(16, -45)
});
return infoWindow;
}
//构建自定义信息窗体
function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
info.style.width = "250px";
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "https://webapi.amap.com/images/close2.gif";
closeX.onclick = closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "https://webapi.amap.com/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
//关闭信息窗体
function closeInfoWindow() {
obj.how.clearInfoWindow();
}
}
(3)信息窗体的信息格式
只要有段落，就以数组元素形式写入
var data = [{
title: '长宁路<span style="font-size:11px;color:#F00;">价格:666</span>',
content: ["<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：长宁路", "电话：151-45561", "<a href='https://www.baidu.com'>详细信息</a>"]
}]
(4)调用方法
var map = new AMap.Map("container", {
resizeEnable: true,
center:[lng, lat],
zoom: 13
});
getAMarker({
how: map,
position: [lng, lat],
title: data[0].title,
content: data[0].content,
flag: true
});
差不多第一个组件的封装已经完成。下次会将另外两个插件进行封装。希望大家可以指出我的不足，以后会加以改正。
- 本人博客地址：https://reinness.com 站点名称：平凡的你我。 欢迎大家的到来！
