AMAP JS API 高德地图Web调用
  • 首页 > 电脑网络
  • 作者: Joseffu
  • 2024年11月26日 12:09 星期二
  • 浏览:126 次
  • 字号:   
  • 评论:0 条  
  • 时间:2024-11-26 12:09   浏览:126  

    众所周知,百度地图在Web应用中调用比较广泛,界面做的一般吧,看多了也腻。我们可以有另外一种选择 —— 高德地图(AMAP JS API)的Web调用,当然,同百度地图API一样,都需要有开发者密钥。1.3版本的 JS API 样例如下:


    CSS: 

    .amap {
    	margin: 0 auto;
    	width: 100%;
    	height: 600px;
    }
    .amap .icon {
    	background: url("//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png") no-repeat;
    }
    .amap .icon-cir {
    	height: 31px;
    	width: 28px;
    }
    .amap .icon-cir-blue {
    	background-position: -11px -55px;
    }
    .amap-container {
    	height: 100%;
    }
    .infowin {
    	width: 240px;
    	min-height: 50px;
    }
    .infowin h5 {
    	height: 20px;
    	line-height: 20px;
    	overflow: hidden;
    	font-size: 14px;
    	font-weight: bold;
    	width: 220px;
    	text-overflow: ellipsis;
    	word-break: break-all;
    	white-space: nowrap;
    }
    .infowin div {
    	margin-top: 10px;
    	min-height: 40px;
    	line-height: 20px;
    	font-size: 13px;
    	color: #6f6f6f;
    }
    .amap-container {
    	height: 100%;
    }
    .amap-info-sharp {
    	background-image: url("//webapi.amap.com/theme/v1.3/sharp.png") !important;
    	background: no-repeat;
    	left: 43px !important;
    }
    .amap-info-sharp, .amap-marker-content {
    	width: 120px !important;
    }
    .mapimgli iframe {
    	width: 100%;
    	height: 600px;
    }
    @media screen and (max-width: 1400px) {
    	.amap {
    		height: 500px;
    		width: 100%;
    	}
    	.mapimgli iframe {
    		width: 100%;
    		height: 450px;
    	}
    }
    @media screen and (max-width: 1100px) {
    	.amap {
    		height: 300px;
    		width: 100%;
    	}
    	.cont01 .row .roe_r {
    		padding: 0 5% !important;
    	}
    	.mapimgli iframe {
    		width: 100%;
    		height: 300px;
    	}
    }
    @media screen and (max-width: 768px) {
    	.amap {
    		height: 250px;
    		width: 100%;
    	}
    	.mapimgli iframe {
    		width: 100%;
    		height: 350px;
    	}
    }


    JS Web API: 

    此处内容已隐藏,【参与评论】方可查看


    JS:

    !function () {
    	var infoWindow, map, level = 12,
    		center = {lng: 116.587116,lat: 35.415117},
    		features = [{
    			"icon": "cir","color": "blue",
    			"name": "某某有限公司",
    			"desc": "某某省某某市",
    			"lnglat": {"Q": 35.415117,"R": 116.587116,"lng": 116.587116,"lat": 35.415117},
    			"offset": {"x": -9,"y": -31},
    			"type": "Marker"
    		}];
    	function loadFeatures() {
    		for (var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++) {
    			data = features[i];
    			switch (data.type) {
    				case "Marker":
    					feature = new AMap.Marker({
    						map: map,
    						position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
    						zIndex: 3,
    						extData: data,
    						offset: new AMap.Pixel(data.offset.x, data.offset.y),
    						title: data.name,
    						content: '<div class="icon icon-' + data.icon + ' icon-' + data.icon + '-' + data.color + '"></div>'
    					});
    					break;
    				default:
    					feature = null;
    			}
    			if (feature) {
    				AMap.event.addListener(feature, "click", mapFeatureClick);
    			}
    		}
    	}
    	function mapFeatureClick(e) {
    		if (!infoWindow) {
    			infoWindow = new AMap.InfoWindow({
    				autoMove: true,
    				isCustom: false
    			});
    		}
    		var extData = e.target.getExtData();
    		infoWindow.setContent("<div class='infowin'><h5>" + extData.name + "</h5><div>" + extData.desc + "</div></div>");
    		infoWindow.open(map, e.lnglat);
    	}
    	map = new AMap.Map("mapcon", {
    		center: new AMap.LngLat(center.lng, center.lat),
    		level: level,
    		keyboardEnable: true,
    		dragEnable: true,
    		scrollWheel: true,
    		doubleClickZoom: true
    	});
    	loadFeatures();
    }();


    HTML部分:

    <div class="amap">
    	<div id="mapcon"></div>
    </div>
    

    JS API 示例:https://lbs.amap.com/demo/javascript-api/example/marker/custom-icon
    AMAP 坐标拾取:https://lbs.amap.com/tools/picker
  • 本文没有标签
    昵称 邮箱 主页
    表情1 表情2 表情3 表情4 表情5 表情6 表情7 表情8 表情9 表情10 表情11 表情12 表情13 表情14 表情15 表情16 表情17 表情18 表情19 表情20 表情21
    98 + 35 =
    © 2004-2024  Joseffu Online 鲁ICP备2021023008号-1 繁体中文
  • 日志:288 篇
  • 评论:227 条
  • 微语:25 条
  • 友链:10 个
  • 分类:5 个
  • 标签:159 个
  • 建站:2004-11-22

    已运行