众所周知，百度地图在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>