众所周知，百度地图在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:
[hide]<script src="//webapi.amap.com/maps?v=1.3&key=54be5b25429b0a248a899c14f93cafad"></script>[/hide]
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>