【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室
查看: 9504|
评论: |原作者: giser
摘要: 关于地图的显示，我想大家最关心的就是麻点图，自定义底图的解决方案了吧。在过去，marker大于500之后，浏览器开始逐渐卡死，大家都开始寻找解决方案，比如聚合marker啊，比如麻点图啊。聚合marker里面还有一些复杂 ...
以前写过从零开始学百度地图API系列，写得比较浅显。如今，自己在LBS领域成长了几年，学到比较多的专业知识，所以此次再次写到”从零系列”，希望加上更多功能，更多想法。比如这期的地图展现，不单单只是告诉大家，一张2D地图如何用代码写出来，同时，还会加上3D地图，卫星图，街景，交通流量图，麻点图，仙剑奇侠传地图等。也希望借此可以和大家更多的交流。
-----------------------------------------------------------------------
一、万物的首先第一步，当然是申请一个key。
登录之后，点新建地图，就有一个自动的key了。
key在右上角密钥管理处
二、 2D地图
2D地图，就是一张普通的高德地图。只需要简单几句话就可以实现。 var mapOvar point = new AMap.LngLat(120..290422);function mapInit(){ //初始化地图对象，加载地图。 mapObj = new AMap.Map("iCenter",{ center : point, //地图中心点 level : 15 //地图显示的缩放级别 });}复制代码其中，level指的是地图级别，默认为[3,18]。3为世界地图，18为街道级地图。
center指的是地图的中心点，可以用坐标拾取工具来取点。坐标拾取工具：
2D效果图：
三、实时路况
添加实时路况，只需要两句话var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层trafficLayer.setMap(mapObj); //添加实时路况图层复制代码消除实时路况有2种方法，一是隐藏hide方法，二是重置地图setMap(null)trafficLayer.setMap(null); //隐藏实时路况图层trafficLayer.hide(); //隐藏实时路况图层复制代码实时路况效果：
四、路网，卫星图
路网、卫星图，都跟实时路况路况差不多，只是换了个类名。
添加路网、卫星图，只需要两句话var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:10}); //实例化路网图层roadNetLayer.setMap(mapObj); //在map中添加路网图层var satellLayer = new AMap.TileLayer.Satellite({zIndex:10}); //实例化卫星图satellLayer.setMap(mapObj); //在map中添加卫星图复制代码消除路网、卫星图，有2种方法，一是隐藏hide方法，二是重置地图setMap(null)roadNetLayer.setMap(null); //隐藏路网roadNetLayer.hide(); //隐藏路网satellLayer.setMap(null); //隐藏卫星图satellLayer.hide(); //隐藏卫星图复制代码路网、卫星图效果：
五、3D地图
3D地图，是在地图比较详细的级别17-18的时候，有三维楼块效果的地图。
所以，要看到3D效果，必须把地图级别调整到17-18才可以看到。var buildingLayer = new AMap.Buildings(); //实例化3D地图图层buildingLayer.setMap(mapObj); //在map中添加3D图层mapObj.setZoom(18); //改变地图级别到17-18复制代码3D地图没有hide方法，所以隐藏他，需要重置地图。buildingLayer.setMap(null);复制代码3D地图效果：
六、麻点图
（记得以前研究百度地图API的时候，麻点图的制作很苦难，要自己去对准坐标，自己生成麻点图，然后自己切片……实在费力……）
高德地图API最好用的就是麻点图。不用自己生成麻点图，不用自己切图。只需要在云图上点一点，就可以完成所有操作。
打开云图管理台：
新建或打开已有的地图：
点右上角的按钮，可以手工一个一个标注你自己的麻点。
当然也可以批量导入你的数据。
数据填充完毕后，记录下你的tableid。这就是你的云图层（麻点图）的id，放到下面的代码里。//加载云图层插件&&mapObj.plugin('AMap.CloudDataLayer', function () { var layerOptions = { query:{keywords: ''}, clickable:true }; var cloudDataLayer = new AMap.CloudDataLayer('【您的tableid】', layerOptions); //实例化云图层类&&cloudDataLayer.setMap(mapObj); //叠加云图层到地图&&});复制代码云图层，就是麻点图，是实时渲染的，你在云图管理台操作之后，立马在你的前台得到显示。
这真是我用过最好用的麻点图了。marker大于500之后，终于有如此方便的解决方案了。
更多关于云图的教程，可以看我以前发过的教程
三甲医院例子：
东莞酒店例子：
七、仙剑地图
这个算是投机取巧，将仙剑地图直接覆盖在高德地图上，属于图片覆盖物。
图片覆盖物需要指定一个显示范围，取左下角和右上角。
显示范围设定后，不管地图放大缩小，图片都只在这个范围中显示。
这样的图片覆盖物，比较适合制作校园地图，厂区地图，小区地图等。
而且，跟云图一样，图片覆盖物不需要切图。
（又想感叹一句！真真是开发者的福音！为何高德API做得那么好，之前我都不知道！！）var bounds = new AMap.Bounds(new AMap.LngLat(120..271596), new AMap.LngLat(120..309171)), groundImageOpts = { opacity: 1, //图片透明度&&clickable: true,//图片相应鼠标点击事件，默认：false&&map: mapObj //图片叠加的地图对象
}; //实例化一个图片覆盖物对象&&var groundImage = new AMap.GroundImage('xianjian.jpg', bounds, groundImageOpts); 复制代码仙剑地图效果：
八、自定义地图
这里用谷歌的底图作为例子，将高德底图直接换为谷歌底图。跟上一段的内容不一样，不是图片覆盖物那么简单哦。
高德的切图方式，和谷歌的一样。所以，在网上找的谷歌地图的切图工具，都可以适用于高德地图。google = new AMap.TileLayer({ tileUrl:"http://mt{1,2,3,0}./vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil"//图块取图地址
}); google.setMap(mapObj); 复制代码谷歌地图：
高德地图街景覆盖城市共33个，分别为：杭州，南京，成都，西安，拉萨，昆明，烟台，沈阳，哈尔滨，长春，常州，南通，林芝，泰安，日照，那曲，东营，日喀则，德州，滨州，聊城，莱芜，郑州，洛阳，平顶山，开封，安阳，信阳，新乡，焦作，商丘，周口，驻马店。
使用街景，必须将您的网页文件传到服务器上。var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层trafficLayer.setMap(mapObj); //添加实时路况图层0复制代码var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层trafficLayer.setMap(mapObj); //添加实时路况图层1复制代码街景效果：
十、全部源代码，请点击这里：
var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层trafficLayer.setMap(mapObj); //添加实时路况图层2复制代码View Code
示例demo在线看：
效果预览：
刚表态过的朋友 ()
热门推荐 /1
[推荐关注微信公众号]
本订阅号内容可能为：GIS相关、互联网、编程相关、工作心得与体会、其他等web应用使用高德地图效果不错。 -
- ITeye博客
1.高德地图的API很详细，很容易自定义自己的地图。
&%@ page language="java" import="java.util.*"& contentType="text/ charset=UTF-8"%&
&%@ taglib prefix="s" uri="/struts-tags"%&
&%@ taglib prefix="c" uri="/jsp/jstl/core" %&
&%@ taglib prefix="fn" uri="/jsp/jstl/functions" %&
&%@ taglib prefix="fmt" uri="/jsp/jstl/fmt"%&
&%@ taglib uri="/WEB-INF/paginator.tld" prefix="paginator"%&
String path = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
&&&&&&& "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&head&
&&& &meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
&&& &title&关键字搜索&/title&
&&& &script language="javascript" src="/maps?v=1.2&key=22f12599eefb22c66b2d0"&&/script&
&&& &link href="&%=path %&/css/fence.css" rel="stylesheet" type="text/css"/&
&&& &script language="javascript"&
&&&&&&& var mapObj, toolbar, overview, scale,
&&&&&&& var date, startT
&&&&&&& var initx = window.opener.document.getElementById("positionx").
&&&&&&& var inity = window.opener.document.getElementById("positiony").
&&&&&&& function mapInit() {
&&&&&&&
//var opt="";
&&&&&&&
//if(initx == ""){
&&&&&&&
// opt = {
&&&&&&&&& //&&&&& level:13, //设置地图缩放级别
&&&&&&&&&&&&&&& //center:new AMap.LngLat(initx, inity), //设置地图中心点
&&&&&&&&& //&&&&& doubleClickZoom:true, //双击放大地图
&&&&&&&&& //&&&&& scrollWheel:true//鼠标滚轮缩放地图
&&&&&&&&&&& // }
&&&&&&&
//}else{
&&&&&&&
var opt = {
&&&&&&&&&&&&&&& level:13, //设置地图缩放级别
&&&&&&&&&&&&&&& //center:new AMap.LngLat(initx, inity), //设置地图中心点
&&&&&&&&&&&&&&& doubleClickZoom:false, //双击放大地图
&&&&&&&&&&&&&&& scrollWheel:true//鼠标滚轮缩放地图
&&&&&&&&&&&
//}
&&&&&&&&&
&&&&&&&&&&&& var GeocoderOption = {
range: 3000, //范围
crossnum: 2, //道路交叉口数
roadnum: 3, //路线记录数
poinum: 2//POI点数
geo = new AMap.Geocoder(GeocoderOption);
&&&&&&&&&&& mapObj = new AMap.Map("iCenter", opt);AMap.Conf.network = 1;
&&&&&&&&&&& mapObj.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function () {
&&&&&&&&&&&&&&& toolbar = new AMap.ToolBar();
&&&&&&&&&&&&&&& toolbar.autoPosition = //加载工具条
&&&&&&&&&&&&&&& mapObj.addControl(toolbar);
&&&&&&&&&&&&&&& overview = new AMap.OverView(); //加载鹰眼
&&&&&&&&&&&&&&& mapObj.addControl(overview);
&&&&&&&&&&&&&&& scale = new AMap.Scale(); //加载比例尺
&&&&&&&&&&&&&&& mapObj.addControl(scale);
&&&&&&&&&&& });
&&&&&&&&&&& AMap.event.addListener(mapObj,'complete',completeEventHandler);
&&&&&&&&&&&
&&&&&&& }
&&&&&&&
&&&&&&& function completeEventHandler() {
&&&&&&&
toolbar.doLocation();
&&&&&&&
listener1=AMap.event.addListener(mapObj,'dblclick',fn);
&&&&&&&
//mapObj.zoomIn();
&&&&&&& }
&&&&&&& var fn = function(e){
&&&&&&&
var lng = e.lnglat.getLng();
&&&&&&&
var lat = e.lnglat.getLat();
&&&&&&&
var lnglatXY = new AMap.LngLat(lng, lat)
geo.regeocode(lnglatXY, poiToAddressSearch_CallBack);
&&&&&&&
var data_temp="";
var& x_temp="";
var& y_temp="";
var address_
function selectPoint2(x, y , i){
address_temp = data_temp.list[i].
//alert(address_temp);
var lnglatXY = new AMap.LngLat( x, y)
geo.regeocode(lnglatXY, poiToAddressSearch_CallBack2);
function poiToAddressSearch_CallBack2(data) {
var resultStr = "";
if (data.status == "E0") {
var province, city, district, road,
province = data.list[0].province.
if (province == "北京市") {
city = data.list[0].city.
district = data.list[0].district.
road = data.list[0].roadlist[0].
address = data.list[0].poilist[0].
if(address_temp ==""){
resultStr = province + city+ district + road +
resultStr = province + city+ district + address_
//alert(x_temp + "---" + y_temp + "---" + address_temp);
selectPoint(x_temp,y_temp,resultStr);
function poiToAddressSearch_CallBack(data) {
var resultStr = "";
if (data.status == "E0") {
var province, city, district, road,
province = data.list[0].province.
if (province == "北京市") {
city = data.list[0].city.
district = data.list[0].district.
road = data.list[0].roadlist[0].
address = data.list[0].poilist[0].
resultStr = province + city+ district + road& +
//alert(resultStr + data.list[0].poilist[0].x +","+ data.list[0].poilist[0].y);
selectPoint(data.list[0].poilist[0].x,data.list[0].poilist[0].y,resultStr);
function selectPoint(x, y, address) {
if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
&&&&&&& alert("地址暂无，不能选择！");
window.opener.document.getElementById("fenceAddr").value =
window.opener.document.getElementById("positionx").value =
window.opener.document.getElementById("positiony").value =
window.close();
//window.parent.submitSaveFence.fenceInfoVO.fenceAddr.value =
}
&&&&&&& function keywordSearch() {
&&& mapObj.clearMap();
&&&&&&&&&&& var keywords = document.getElementById("keyword").
&&&&&&&&&&& var city = document.getElementById("city").
&&&&&&&&&&& var PoiSearchOption = {
&&&&&&&&&&&&&&& srctype:"POI", //数据来源
&&&&&&&&&&&&&&& type:"", //数据类别
&&&&&&&&&&&&&&& number:10, //每页数量,默认10
&&&&&&&&&&&&&&& batch:1, //请求页数，默认1
&&&&&&&&&&&&&&& range:3000, //查询范围，默认3000米
&&&&&&&&&&&&&&& ext:""//扩展字段
&&&&&&&&&&& };
&&&&&&&&&&& var MSearch = new AMap.PoiSearch(PoiSearchOption);
&&&&&&&&&&& MSearch.byKeywords(keywords, city, keywordSearch_CallBack);
xx++;
&&&&&&&&&&& date = new Date();
&&&&&&&&&&& startTime = date.getTime();
&&&&&&&&&&& //清空本次搜索的marker和windowsArr
&&&&&&&&&&& marker=[];
&&&&&&&&&&& windowsArr=[];
&&&&&&& }
&&&&&&& var resultCount = 10;
&&&&&&& var marker = new Array();
&&&&&&& var windowsArr = new Array();
var xx=0;
&&&&&&& function addmarker(i, d) {
&&&&&&&&&&& var markerOption = {
&&& map:mapObj,
&&&&&&&&&&&&&&& icon:"/webapi/static/Images/" + (i + 1) + ".png",
&&&&&&&&&&&&&&& position:new AMap.LngLat(d.x, d.y)
&&&&&&&&&&& };
&&&&&&&&&&& var mar = new AMap.Marker(markerOption);
&&&&&&&&&
&&&&&&&&&&& marker.push(new AMap.LngLat(d.x, d.y));
&&&&&&&&&&& var infoWindow = Window
&&&&&&&&&&&&&&&&&&& ({
&&&&&&&&&&&&&&&&&&&&&&& content:"&h3&&font color=\"#00a6ac\"&&&" + (i + 1) + ". " + d.name + "&/font&&/h3&" + TipContents(d.type, d.address, d.tel),
&&&&&&&&&&&&&&&&&&&&&&& size:new AMap.Size(300, 0),
&&&&&&&&&&&&&&&&&&&&&&& autoMove:true,& //设置自动调整信息窗口至视野范围
offset:new AMap.Pixel(0,-30)
&&&&&&&&&&&&&&&&&&& });
&&&&&&&&&&& windowsArr.push(infoWindow);
&&&&&&&&&&
&&&&&&&&&&& var aa = function (e) {
&&&&&&&&&&&&&&& infoWindow.open(mapObj, mar.getPosition());
&&&&&&&&&&& };
&&&&&&&&&&
//AMap.event.addListener(mar, "click", aa);
&&&&&&& }
&&&&&&& function keywordSearch_CallBack(data) {
&&&&&&&&&&& var resultStr = "";
&&&&&&&&&&& data_temp=
&&&&&&&&&&& //showTime();
//document.getElementById("textUniqId").value = data.
&&&&&&&&&&& if (data.status == "E0") {
&&&&&&&&&&&&&&& resultCount = data.list.
&&&&&&&&&&&&&&& for (var i = 0; i & data.list. i++) {
&&&&&&&&&&&&&&&
//alert(data.list[i].x+"--"+data.list[i].y+"***");
&&&&&&&&&&&&&&&&&&& resultStr += "&div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12cursor:padding:0px 0 4px 2 border-bottom:1px solid #C1FFC1;\"&" +
&&&&&&&&&&&&&&&&&&& "&table&&tr&&td&&button onclick='javascript:selectPoint2("+data.list[i].x+","+data.list[i].y+","+i+");'&选择&/button&&/td&&td&&img src=\"/webapi/static/Images/" + (i + 1) + ".png\"&&/td&"
&&&&&&&&&&&&&&&&&&& + "&td&&h3&&font color=\"#00a6ac\"&名称: " + data.list[i].name + "&/font&&/h3&";
&&&&&&&&&&&&&&&&&&& resultStr += TipContents(data.list[i].type, data.list[i].address, data.list[i].tel) + "&/td&&/tr&&/table&&/div&";
&&&&&&&&&&&&&&&&&&& addmarker(i, data.list[i]);
&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& mapObj.setFitView();
&&&&&&&&&&& }
&&&&&&&&&&& else if (data.status == "E1") {
&&&&&&&&&&&&&&& resultStr = "未查找到任何结果!&br /&建议：&br /&1.请确保所有字词拼写正确。&br /&2.尝试不同的关键字。&br /&3.尝试更宽泛的关键字。";
&&&&&&&&&&& }
&&&&&&&&&&& else {
&&&&&&&&&&&&&&& resultStr = "错误信息：" + data.state + "请对照API Server v2.0.0 简明提示码对照表查找错误类型";
&&&&&&&&&&& }
&&&&&&&&&&& document.getElementById("result").innerHTML = resultS
&&&&&&& }
&&&&&&& function TipContents(type, address, tel) {
&&&&&&&&&&& if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
&&&&&&&&&&&&&&& type = "暂无";
&&&&&&&&&&& }
&&&&&&&&&&& if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
&&&&&&&&&&&&&&& address = "暂无";
&&&&&&&&&&& }
&&&&&&&&&&& if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
&&&&&&&&&&&&&&& tel = "暂无";
&&&&&&&&&&& }
&&&&&&&&&&& var str = "&&地址：" + address + "&br /&&&电话：" + tel + " &br /&&&类型：" +
&&&&&&&&&&&
&&&&&&& }
&&&&&&& function openMarkerTipById1(pointid, thiss) {& //根据id 打开搜索结果点tip
&&&&&&&&&&& thiss.style.background = '#CAE1FF';
&&&&&&&&&&& windowsArr[pointid].open(mapObj, marker[pointid]);
&&&&&&& }
&&&&&&& function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
&&&&&&&&&&& thiss.style.background = "";
&&&&&&& }
&&&&&&& function showTime(){
&&&&&&&&&&& var date = new Date();
&&&&&&&&&&& document.getElementById("textSearchTime").value = date.getTime() - startTime + "毫秒";
&&&&&&& }
&&& &/script&
&/head&
&body onload="mapInit();" &
&& &div class="addressMain"&
&div class="left" &
&div class="searcherLayer"&
&& &b&城市：&/b&
&&&&&&&&&& &input type="text" id="city" name="city" value=""/&
&&&&&&&&&& &b&关键字：&/b&
&&&&&&&&&& &input type="text" id="keyword" name="keyword" value=""/&
&&&&&&&&&& &input type="button" value="查询" onclick="keywordSearch()" style="margin-left:5px"/&
&&& &div id="iCenter" style="width:679height:400border:#F6F6F6 solid 1"&&/div&
&&& &/div&
&&& &div class="right" &
&div id="r_title"&关键字搜索结果:&/div&
&&&&&&& &div id="result"&&/div&
&&& &/div&
&& &/div&
&/body&
&/html&
浏览 11033
ahua186186
浏览: 219274 次
来自: 深圳
请问图片还能找的会吗？你的图片和原文的图片都挂了，，，如果有图 ...
yngwiet 写道楼主，有一个地方不太明白，为什么要用“ge ...
楼主，有一个地方不太明白，为什么要用“getChildAt(p ...