高德地图JS API 开发小结
项目中有一块功能要用到高德地图，所以，想把编码小结一下。
首先是地图的初始化
var map = new AMap.Map("mapDiv", {
zoom: 17,//设置地图的缩放比例
center: [112.57, 37.87],//地图中心
resizeEnable: true //是否监控地图容器尺寸变化
});
Map类的其他属性，详见 https://lbs.amap.com/api/javascript-api/reference/map
自定义点标记：
// 自定义点标记显示内容，HTML要素字符串
var markerContent = '<div class="labeledMarkerStyle2">' +
'<span>' +
'<a href="javascript:void(0);">' +
'<table id="tip38521" cellspacing="0" cellpadding="0" border="0">' +
'<tbody>' +
'<tr>' +
'<td class="s1"> </td>' +
'<td class="s2">@(Model.proname)</td>' +
'<td class="s3"> </td>' +
'</tr>' +
'<tr>' +
'<td colspan="3" class="s5"></td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</a>' +
'</span>' +
'</div>';
//自定义点标记初始化
var marker = new AMap.Marker({
map: map, //要显示该marker的地图对象
position: [112.602951,37.816592],
content: markerContent, //点标记内容
offset: new AMap.Pixel(-13, -30) //点标记显示位置偏移量
});
// 将 markers 添加到地图
map.add(marker);
Marker类其他属性详见：https://lbs.amap.com/api/javascript-api/reference/overlay#marker
自定义信息窗体：
//鼠标点击marker弹出自定义的信息窗体
AMap.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker.getPosition());
});
//信息窗体显示内容
var title = '项目名',
content = [];
content.push('参考价格：<font style="color: #FF6600; font-family: Arial; font-size: 18px; font-weight: bold;">8256元/平方</font><br>');
content.push('销售状态：在售<br>');
content.push('物业类型：小洋房<br>');
content.push('所属区域：迎泽区<br>');
content.push('开盘时间：2017年5月9日<br>');
console.log(content);
cover = [];
cover.push('<a href="/NewHouses/Detail/15" target="_blank"><img src="img" width="166" height="140" border="0"></a>');
linkline = [];
linkline.push('[<a href="/NewHouses/Detail/15" class="D4D4" target="_blank">楼盘详情</a>]');
linkline.push('[<a href="/NewHouses/Detail/15" class="D4D4" target="_blank">周边查询</a>]');
linkline.push('[<a href="/NewHouses/Detail/15" class="D4D4" target="_blank">楼盘快讯</a>]');
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
position: [112.602951,37.816592],
content: createInfoWindow(),
size: new AMap.Size(410, 0),
offset: new AMap.Pixel(320, -280)
});
//构建自定义信息窗体
function createInfoWindow() {
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
var firstout = document.createElement("div");
firstout.className = "amap-overlays";
var outout = document.createElement("div");
outout.className = "amap-info outout";
var outtop = document.createElement("div");
outtop.className = "outtop";
//外围
var out = document.createElement("div");
out.className = "out";
var out1 = document.createElement("div");
//内围
var nei = document.createElement("div");
nei.className = "amap-info-content amap-info-outer";
nei.style.width = "410px;";
//标题
var titleD = document.createElement("div");
titleD.className = "titleD";
titleD.innerHTML = title;
nei.appendChild(titleD);
//标题下的分割线
var titleline = document.createElement("div");
titleline.className = "titleLine";
nei.appendChild(titleline);
//内容
var middle = document.createElement("div");
middle.className = "content";
middle.innerHTML = content.join("");
nei.appendChild(middle);
//封面
var img = document.createElement("div");
img.className = "img";
img.innerHTML = cover;
nei.appendChild(img);
//底部链接
var link = document.createElement("div");
link.className = "link";
link.innerHTML = linkline;
nei.appendChild(link);
//关闭
var closeX = document.createElement("a");
closeX.className = "amap-info-close";
closeX.id = "close";
closeX.innerHTML = "×";
closeX.onclick = closeInfoWindow;
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "amap-info-sharp";
bottom.style.height = '23px';
out1.appendChild(nei);
out1.appendChild(closeX);
out1.appendChild(bottom);
out.appendChild(out1);
outout.appendChild(outtop);
outout.appendChild(out);
firstout.appendChild(outout)
return firstout;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
给多个自定义点标记添加自定义信息窗体：
var markets=[];
$.post("/NewHouses/MapSearchByArea",{area:area},function(data){
var infoWindow = new AMap.InfoWindow({isCustom: true,size: new AMap.Size(410, 0),offset: new AMap.Pixel(320, -280)});
for(var i=0;i<data.length;i++){
if(data[i].coordinate!=""){
var coordinate=data[i].coordinate.split(',');
// 点标记显示内容，HTML要素字符串
var markerContent = '<div class="labeledMarkerStyle2">' +
'<span>' +
'<a href="javascript:void(0);">' +
'<table id="tip38521" cellspacing="0" cellpadding="0" border="0">' +
'<tbody>' +
'<tr>' +
'<td class="s1"> </td>' +
'<td class="s2">'+data[i].proname+'</td>' +
'<td class="s3"> </td>' +
'</tr>' +
'<tr>' +
'<td colspan="3" class="s5"></td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</a>' +
'</span>' +
'</div>';
var marker1 = new AMap.Marker({
map: map,
position: [coordinate[0],coordinate[1]],
// 将 html 传给 content
content: markerContent,
// 以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
extData:data[i].id+"|"+data[i].proname+"|"+data[i].pricec+"|"+data[i].sales_status+"|"+data[i].property_type+"|"+data[i].area+"|"+data[i].kptime+"|"+data[i].sales_tel+"|"+data[i].img+"|"+data[i].coordinate,
});
markets.push(marker1);
marker1.on('click', markerClick);
}
}
function markerClick(e) {
infoWindow.setContent(createInfoWindow($(e)));
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
//构建自定义信息窗体
function createInfoWindow(e) {
//console.log(e);
var pro=e[0].target.getExtData().split('|');
//实例化信息窗体
var title = pro[1],
content = [];
content.push('参考价格：<font style="color: #FF6600; font-family: Arial; font-size: 18px; font-weight: bold;">'+pro[2]+'</font><br>');
content.push('销售状态：'+pro[3]+'<br>');
content.push('物业类型：'+pro[4]+'<br>');
content.push('所属区域：'+pro[5]+'<br>');
content.push('开盘时间：'+pro[6]+'<br>');
content.push('销售电话：<font style="color: #FF6600; font-family: Arial; font-size: 16px; font-weight: bold;">'+pro[7]+'</font>');
cover = [];
cover.push('<a href="/NewHouses/Detail/'+pro[0]+'" target="_blank"><img src="'+pro[8]+'" width="166" height="140" border="0"></a>');
linkline = [];
linkline.push('[<a href="/NewHouses/Detail/'+pro[0]+'" class="D4D4" target="_blank">楼盘详情</a>]');
linkline.push('[<a href="/NewHouses/Detail/'+pro[0]+'#dt" class="D4D4" target="_blank">周边查询</a>]');
linkline.push('[<a href="/NewHouses/Detail/'+pro[0]+'" class="D4D4" target="_blank">楼盘快讯</a>]');
var coor=pro[9].split(",");
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
var firstout = document.createElement("div");
firstout.className = "amap-overlays";
var outout = document.createElement("div");
outout.className = "amap-info outout";
var outtop = document.createElement("div");
outtop.className = "outtop";
//外围
var out = document.createElement("div");
out.className = "out";
var out1 = document.createElement("div");
//内围
var nei = document.createElement("div");
nei.className = "amap-info-content amap-info-outer";
nei.style.width = "410px;";
//标题
var titleD = document.createElement("div");
titleD.className = "titleD";
titleD.innerHTML = title;
nei.appendChild(titleD);
//标题下的分割线
var titleline = document.createElement("div");
titleline.className = "titleLine";
nei.appendChild(titleline);
//内容
var middle = document.createElement("div");
middle.className = "content";
middle.innerHTML = content.join("");
nei.appendChild(middle);
//封面
var img = document.createElement("div");
img.className = "img";
img.innerHTML = cover;
nei.appendChild(img);
//底部链接
var link = document.createElement("div");
link.className = "link";
link.innerHTML = linkline;
nei.appendChild(link);
//关闭
var closeX = document.createElement("a");
closeX.className = "amap-info-close";
closeX.id = "close";
closeX.innerHTML = "×";
closeX.onclick = closeInfoWindow;
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "amap-info-sharp";
bottom.style.height = '23px';
out1.appendChild(nei);
out1.appendChild(closeX);
out1.appendChild(bottom);
out.appendChild(out1);
outout.appendChild(outtop);
outout.appendChild(out);
firstout.appendChild(outout)
return firstout;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
})
高德地图JS API 开发小结的更多相关文章
- 高德地图 js api 使用
使用高德地图js api 制作网页上的地图应用. 1.先申请一个 开发者用的 key . 2. 在页面中引入高德提供的地图js <script src="http://webapi. ...
- 高德地图JavaScript API开发研究
高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API ...
- 高德地图 JavaScript API 开发系列教程（二）
上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地 ...
- 高德地图 JavaScript API 开发系列教程（一）
高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaSc ...
- 高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
- 高德地图 JS API - 根据经纬度获取周边建筑地标
像我们经常用的微信或微博,发表动态时都有选择位置的功能,根据当前的定位获取附近的地标.利用高德地图我们就可以实现这样的功能. 1. 具体代码: // 高德地图查询周边 function aMapSea ...
- 百度地图 JS API开发Demo01
百度地图DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- 高德地图JS API获取经纬度，根据经纬度获取城市
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)
-*- 父页面js function mapFocus(){ //console.log("-*-"); var longitude = mini.get("jd&qu ...
随机推荐
- Excel透视技巧-三级分类统计名单、分类统计数据
Excel透视技巧-三级分类统计名单.分类统计数据 基础数据 透视表1--三级分类统计名单 透视表2-分类统计数据
- Android的Touch事件分发机制简单探析
前言 Android中关于触摸事件的分发传递是一个很值得研究的东西.曾不见你引入了一个ListView的滑动功能,ListView就不听你手指的指唤来滚动了:也不知道为啥Button设置了onClic ...
- js实现oss文件上传及一些问题
关于兼容性问题,ie8以下的可以使用4.x的版本 一.引入sdk和jq <script src="http://libs.baidu.com/jquery/2.0.0/jquery.m ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇（二十五）：Spring Security 版本
在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 到目前为止,我们使用的权限认证框架是 Shiro,虽然 Shiro ...
- redis.properties
#### env:${env} redis.maxIdle= ##最小空闲数 redis.minIdle= ##最大连接数:能够同时建立的“最大链接个数” redis.maxTotal= #每次最大连 ...
- java学习-消息队列rabbitmq的组成
rabbitMQ组成部分 rabbitmq有以下组成部分,分别为: 1. Server(broker)接受客户端连接,实现AMQP消息队列和路由功能的进程 2.虚拟主机virtual host虚拟主机 ...
- mybatis教程之原理剖析
MyBatis是目前非常流行的ORM框架,功能很强大,然而其实现却比较简单.优雅.本文通过代理的方式来看下其实现 方式一:传统API方式 @Test public void add() throws ...
- spring的第二天
spring的第二天 ssm框架 spring 在昨天简单的介绍了一下spring,那么今天接着继续介绍. spring值的注入 自动装配[autowire] 引用资源 applicationCon ...
- [转]Angular 4|5 Material Dialog with Example
本文转自:https://www.techiediaries.com/angular-material-dialogs/ In this tutorial, we're going to learn ...
- [转]VR原理讲解及开发入门
本文转自:http://www.52vr.com/article-661-1.html 本文是作者obuil根据多年心得专门为想要入门的VR开发者所写,由52VR网站提供支持. 1. VR沉浸感和 ...