js 百度地图api

拼搏现实的明天。 2022-06-10 03:51 316阅读 0赞

[百度地图JavaScript API][JavaScript API]是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

<script type="text/javascript" src="http://api.map.baidu.com/api?"></script>//加载百度地图api的地址
    <script type="text/javascript">
        //分割线高度
        var h1 = $('#height1').height();
        var h2 = $('#height').height();
        if (h1 > h2) {
            $('#s_height').height(h1);
        } else {
            $('#s_height').height(h2);
        }
    
    
        //地图
        var open_store = (new Function('return ' + $('#open_store').val()))();
        var close_store = (new Function('return ' + $('#close_store').val()))();
        var myIcon = new BMap.Icon('__PUBLIC__/images/icon/logo-x.png', new BMap.Size(65, 57));
        var myIcon_old = new BMap.Icon('__PUBLIC__/images/icon/logo-y.png', new BMap.Size(65, 57));
    
        // 百度地图API功能	
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(121.481387,31.235317), 11);
    
        for (var j = 0; j < close_store.length; j++) {
            var opts = {
                width: 600, // 信息窗口宽度
                height: 120, // 信息窗口高度
                title: close_store[j]['map_title'], // 信息窗口标题
                enableMessage: true//设置允许信息窗发送短息
            };
            var marker = new BMap.Marker(new BMap.Point(close_store[j]['longitude'], close_store[j]['latitude']));  // 创建标注
            var content = close_store[j]['map_address'];
    //        map.addOverlay(marker);
            // 将标注添加到地图中
            var point = new BMap.Point(close_store[j]['longitude'], close_store[j]['latitude']);
            var marker1 = new BMap.Marker(point, {icon: myIcon_old}); // 创建标注
            map.addOverlay(marker1);
            addClickHandler(content, marker1, opts);
        }
        for (var j = 0; j < open_store.length; j++) {
            var opts = {
                width: 600, // 信息窗口宽度
                height: 120, // 信息窗口高度
                title: open_store[j]['map_title'], // 信息窗口标题
                enableMessage: true//设置允许信息窗发送短息
            };
            var marker = new BMap.Marker(new BMap.Point(open_store[j]['longitude'], open_store[j]['latitude']));  // 创建标注
            var content = open_store[j]['map_address'];
    //        map.addOverlay(marker);               // 将标注添加到地图中
            // 将标注添加到地图中
            var point = new BMap.Point(open_store[j]['longitude'], open_store[j]['latitude']);
            var marker1 = new BMap.Marker(point, {icon: myIcon}); // 创建标注
            map.addOverlay(marker1);
            addClickHandler(content, marker1, opts);
        }
        $('.map_clcik').click(function () {
            var longitude = $(this).attr('longitude');
            var latitude = $(this).attr('latitude');
            map.centerAndZoom(new BMap.Point(longitude, latitude), 23);
            setTimeout(function () {
                map.setZoom(23);
            }, 2000);  //2秒后放大到14级
            map.enableScrollWheelZoom(true);
            $("body").scrollTop(600);
        });
        function addClickHandler(content, marker, opts) {
            marker.addEventListener("mouseover", function (e) {
                openInfo(content, e, opts)
            }
            );
            marker.addEventListener("mouseout", function (e) {
                closeInfo(content, e, opts)
            }
            );
            marker.addEventListener("click", function (e) {
                showInfo(e);
            }
            );
    
        }
        function openInfo(content, e, opts) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        }
        function closeInfo(content, e, opts) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
            map.closeInfoWindow(infoWindow, point); //开启信息窗口
        }
        function showInfo(e) {
            var p = e.target;
            map.centerAndZoom(new BMap.Point(p.getPosition().lng, p.getPosition().lat), 23);
            setTimeout(function () {
                map.setZoom(23);
            }, 2000);  //2秒后放大到14级
            map.enableScrollWheelZoom(true);
        }
    
        //缩放地图
        setTimeout(function () {
            map.setZoom(11);
        }, 2000);  //2秒后放大到14级
        map.enableScrollWheelZoom(true);
    </script>

[JavaScript API]: http://lbsyun.baidu.com/index.php?title=jspopular

发表评论取消回复

表情：

评论列表（有 0 条评论，316人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图API使用记录

背景：最近需要开发一个使用到地图的网站，对百度地图API做了些研究，记录如下使用方法： 1.引入百度脚本 <span style="

逃离我推掉我的手/ 2022年08月05日 08:16/ 0 赞/ 300 阅读

相关 js 百度地图api

[百度地图JavaScript API][JavaScript API]是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支

拼搏现实的明天。/ 2022年06月10日 03:51/ 0 赞/ 317 阅读

相关 js+百度地图API

js与百度地图API实例： <div id='address'></div> <script src="http://api.map.baidu.com/ap

旧城等待，/ 2022年04月16日 03:59/ 0 赞/ 365 阅读

相关 js调用百度地图api实现定位

<?php / Created by PhpStorm. User: onlythen Date: 5/26/15

深藏阁楼爱情的钟/ 2022年04月08日 11:30/ 0 赞/ 469 阅读

相关 JS百度地图显示

步骤 1.百度地图API接口:[http://lbsyun.baidu.com/][http_lbsyun.baidu.com] 2.![在这里插入图片描述][wat

我不是女神ヾ/ 2022年03月02日 13:30/ 0 赞/ 353 阅读

相关 JAVA 百度地图 API

唉。。已经无力吐槽废话。。直接进入正题吧。。第一次写。。如有不足之处请谅解。。哦对了。。我们这个是 web 端获取 API 的官方文档：[http://lbsyun.ba

你的名字/ 2022年02月24日 12:58/ 0 赞/ 515 阅读

相关百度地图API计算经纬度

百度地图API计算经纬度注册百度地图开发者申请应用的APKEY 设置白名单代码实现注册百度地图开发者注册地址：http:

浅浅的花香味﹌/ 2021年10月23日 22:50/ 0 赞/ 816 阅读

相关百度地图API实现地图应用

企业官网上需要用到地图应用，这里对百度地图API的使用做点笔记，好记性不如烂笔头。实现地图应用的流程如下： 1、获取密钥；教程网址 [https://jingyan.ba

灰太狼/ 2021年09月18日 10:22/ 0 赞/ 721 阅读

相关百度地图API 加载百度地图

前言百度地图在日常生活中应用的越来越多，功能也日渐丰富，我们可以使用ArcGIS JS API加载在线百度地图（[https://blog.csdn.net/i

布满荆棘的人生/ 2021年09月15日 02:50/ 0 赞/ 736 阅读

相关百度地图API功能演示

draw.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ

我会带着你远行/ 2021年06月26日 16:06/ 0 赞/ 757 阅读