百度地图WebAPI

百度地图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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值