高德地图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";

//关闭信息窗体
                    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 ...

随机推荐

c/c++本地时间获取
在记录程序日志时,需要记录时间.如下: #include <iostream> #include <time.h> #include <windows.h> usi ...
常用的.NET开源项目（转）
Json.NET http://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Lin ...
openshift上使用devicemapper
环境:openshift v3.6.173.0.5 openshift上devicemapper与官方文档中的描述略有不同,在官方文档的描述中,容器使用的lvm文件系统挂载在/var/lib/devi ...
记录一个简单的dbcp数据连接池
这个示例用到了ThreadLocal与dbcp,我觉得有点意思,就整理了下.使用dbcp,肯定要导入commons-dbcp.jar包.下面直接贴DBUtil代码: public class DBUt ...
【详解】Spring Security 之 SecurityContext
前言本文主要整理一下SecurityContext的存储方式. SecurityContext接口顾名思义,安全上下文.即存储认证授权的相关信息,实际上就是存储"当前用户"账号 ...
Ansible系列(四)：playbook应用和roles自动化批量安装示例
Ansible系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html playbook是ansible实现批量自动化最重要的手段.在其中可以使用变 ...
JavaSE Lambda表达式(JDK1.8新特性)
在前面有一篇写到了Lambda表达式,现在可以给你们介绍什么是Lambda表达式现在有很多老程序员都不喜欢这个函数式编程思想主要就一点 : 老程序员习惯了面向过程写程序,而Lambda表达式是 ...
canvas离屏技术与放大镜实现
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)canvas 离屏技术与放大镜实现. 更多讨论或者错误提交,也请移步. 利用canvas除了可以实现 ...
WindowsPhone8.1 开发技巧
1.调用系统内置滤镜: Windows.ApplicationModel.CameraApplicationManager.ShowInstalledApplicationsUI(); 2.完全退出应 ...
关于IOS下click事件委托失效的解决方案
一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...

高德地图JS API 开发小结

高德地图JS API 开发小结的更多相关文章

随机推荐

热门专题