百度地图WebAPI
调用百度地图WebAPI实现如下周边配套效果

可以点 这里 查看效果
首先要去百度地图开放平台 申请为百度开发者,然后得到服务秘钥(ak)
WEB服务API: http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-placeapi
这里还有JS代码和html页面代码的示例: http://lbsyun.baidu.com/jsdemo.htm#i1_1
有了这两个文档和示例,我们就可以开始我们的开发了。
直接上代码
@*地图模块*@
<script type="text/javascript">
$(function () {
var city = "成都市西南交大";
var addr = $(".map-content").attr("name");
var map, latitude, longitute;
var MapTitleId //地图面板ID
var keyword ="交通"; //一级面板查询字
var subKeyword = "地铁站" //二级面板查询字
var iconURL = "";
var pointArray = new Array(); //周边点经纬度Point对象数组
var ServiceArray = new Array(); //周边点详细信息
//var DistanceArr = new Array(); //周边点到中心点距离
function initMap() {
//createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function setMapEvent() {
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target, window) {
target.addEventListener("click", function () {
target.openInfoWindow(window);
});
}
function addMapOverlay() {
}
//向地图添加控件
function addMapControl() {
var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: 0 });
map.addControl(navControl);
}
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text, mouseoverText) {
this._point = point;
this._text = text;
this._overText = mouseoverText;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function (map) {
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#EE5D5B";
div.style.border = "1px solid #BC3B3A";
div.s