百度地图使用

头部:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=84302469552E1fa2d226abf98264cc96"></script>

页面载入地图

// -------------- 载入地图 -----------------
var map = new BMap.Map("lightning-wrapper", {minZoom: 5, mapType: BMAP_SATELLITE_MAP});
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom();
// 标注行政区
var bdary = new BMap.Boundary();
// 标注行政区
bdary.get(‘${city}‘, function (rs) {
    var count = rs.boundaries.length;
    for (var c = 0; c < count; c++) {
        var ply = new BMap.Polygon(rs.boundaries[c], {strokeWeight: 1, strokeColor: "#FF0000", fillColor: "#FEFEFE", fillOpacity: 0.6});
    }
    map.addOverlay(ply);
    map.setViewport(ply.getPath());
});

使用自定义图标

var myIcon = new BMap.Icon("${resource(dir: ‘images‘, file: ‘lightning.png‘)}", new BMap.Size(32, 32));

处理数据

$(".searchable").bind("click", function () {
    // 先清除所有的active
    $(".searchable").removeClass("active");
    var active = $(this);
    active.addClass("active");
    // 请求页面
    var begin = active.attr("begin");
    var end = active.attr("end");
    var reqUrl = dataUrl;

    // 替换请求的时间变量
    reqUrl = reqUrl.replace(‘begin‘, begin).replace(‘end‘, end);

    txt.html("请求数据...");

    // 先清除所有的点
    for (var i = 0; i < markers.length; i++) {
        map.removeOverlay(markers[i]);
    }

    // 清除容器
    markers = [];

    // 请求数据
    $.ajax({
        type: ‘get‘,
        url: reqUrl,
        dataType: ‘jsonp‘,
        jsonp: "callback",
        jsonpCallback: "callback1",
        success: function (data) {
            // 解析数据,加入到地图中
            // 输出经纬度
            if ("DB_ERROR : query no dataset" == data) {
                txt.html("没有数据");
            } else {
                txt.html("找到 " + data.length + " 条记录");
                for (var i = 0; i < data.length; i++) {
                    var lot = data[i][‘longitude‘];
                    var lat = data[i][‘latitude‘];
                    var ist = data[i][‘intensity‘];

                    if (lot && lat) {
                        // 加入到地图
                        var point = new BMap.Point(lot, lat);
                        markers[i] = new BMap.Marker(point, {icon: myIcon});
                        map.addOverlay(markers[i]);
                    }
                }
            }
        }

    });
});
时间: 2024-08-24 07:25:24

百度地图使用的相关文章

百度地图API实现批量地址解析

1.前言 写这篇文章的原因是最近做一个GIS项目在网上爬取了一些数据,无奈只有地址的文字信息没有坐标信息,如何把信息显现在地图上呢?很纠结啊,查看了一下百度地图API惊奇的发现百度提供了地址解析的API,然后查看了他的Demo后豁然开朗,所以动手将自己的文字信息数据进行解析坐标信息.下面开始讲解. 2.方案 (1)自己数据库中的数据 (2)百度地图API Demo <!DOCTYPE html> <html> <head> <meta http-equiv=&qu

js中实现高德地图坐标经纬度转百度地图坐标

1 function tobdMap(x, y) { 2 var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3 var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); 4 var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); 5 var bd_lon = z * Math.cos(theta) + 0.00

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde

百度地图标注图标太小

1.1.1  现象 百度地图中,定位点的标注示意图标太小: 实际期望的图标是这样的: 1.1.2  原因 检查了很久,以为是打开地图时的设置问题,后来慢慢查找地图上的元素定位,终于发现原来这个图标大小是被CSS控制的,在地图元素的内部可以找到如下代码: 这个img元素就是用来显示定位图标的,可以修改这个元素的CSS属性来改变大小. 1.1.3  解决 如果要使用默认大小,则需要配置如下CSS: img {     max-width: inherit; } 原来图标变小,是因为其它CSS配置导致

Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图

标签: Android百度地图API Key  分类: Android 百度地图开发(2)  最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不多,本篇文章就带领大家在自己的Android项目中加入百度地图的功能,接下来我会写一系列关于百度地图的文章,欢迎大家到时候关注!   一 申请API key 在使用百度地图之前,我们必须去申请一个百度地图的API key,申请地址http://lbsyun.baidu.com/a

HTML5结合百度地图API创建地图应用

具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid;} </style> <script src="http://api.map.baidu.com/api?v=1.3"></script> <script> window.onload = function(){ var oInput =

百度地图SDK开发过程中遇到的问题解析

问题1. 在运行显示百度地图是出现如下错误,导致程序停止: 01-30 06:49:49.935: E/AndroidRuntime(9132): Caused by: java.lang.UnsatisfiedLinkError: Couldn't load BaiduMapSDK_v3_2_0_15 from loader dalvik.system.PathClassLoader[dexPath=/data/app/com.example.getsmsinfo-1.apk,libraryP

Android如何申请百度地图key

在开发过程中,有时候会使用到地图定位之类的功能,在使用百度地图之前,我们先要申请一个百度地图的key方才能使用,接下来,一步步教给大家如何去申请一个百度地图key 登录你的百度帐号,之后搜索---"百度地图api",如下图所示: 选择第一个,点击进去之后,往下拉,如图所示: 点击申请密钥,如图所示: 接下来如图所示: 接下去找Android SDK安全码,如图所示: 之后回到页面,将复制的东西拷贝到安全码那,之后写一个英文分号;   ,之后加上项目包名,就好,如下图: 点击提交之后,

Android百度地图开发(一)之初体验

转载请注明出处:http://blog.csdn.net/crazy1235/article/details/42614603 做关于位置或者定位的app的时候免不了使用地图功能,本人最近由于项目的需求需要使用百度地图的一些功能,所以这几天研究了一下,现写一下blog记录一下,欢迎大家评论指正! 一.申请AK(API Key) 要想使用百度地图sdk,就必须申请一个百度地图的api key.申请流程挺简单的. 首先注册成为百度的开发者,然后打开http://lbsyun.baidu.com/ap

Android应用中使用百度地图API定位自己的位置(二)

官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发者们提供了如下类型的地图覆盖物: 我的位置图层(MyLocationOverlay):用于显示用户当前位置的图层(支持自定义位置图标): Poi搜索结果图层(PoiOverlay):用于显示兴趣点搜索结果的图层: 路线图层(RouteOverlay):公交.步行和驾车线路图层,将公交.步行和驾车出行方案的路线及关键点显示在地图上(起.终