百度地图行政区绘制

JavaScript016

百度地图行政区绘制,第1张

前段时间有一个很好玩的需求;绘制上海行政区的边界线而且还要在地图上打上热力点,看了下百度地图可以实现就顺便研究了一下,简单的写了demo记录一下。

1.首先获取每个行政区域的边界坐标值,可能会有很多。使用以下方法:

最后的json数据文件传不了,贴上又太多。需要的话也可以私发,或者通过上面方法一个区一个区自己获取;

2.获取到的坐标值存入boundaryPoints对象,开始绘制线;

也就是以上简单的两个步骤,行政区域就画好了。美中不足就是部分区域有误差,但是这些坐标值都是百度的API返回的。先看看效果图。

3.打热力点;其实吧这个需要使用的地图类型是type=webgl;引入的文件也不一样;

以上几个文件是需要额外引入的,其中mapv.min.js 和 common.js 在百度地图官方demo里扒下来放在本地才可以使用;

result数组里的热力点可能会有很多,我删了不少,大致就是这样;

4.最终效果

你路径写的是没问题的,不过这错误看起来象是 menu.js 文件里面出错了,不象没找到 munu.js 的样子。试试把 menu.js 清空写个alert(1)试试,看会不会弹框。

个人建议,升级成IE8 或者 9 吧, 开发人员工具对调试脚本非常有帮助。

本文实例讲述了javascript模拟map输出与去除重复项的方法。分享给大家供大家参考。具体方法如下:

1.Javascriptmap输出

function

Map(){

//

private

var

obj

=

{}

//

空的对象容器,承装键值对

//

put

方法

this.put

=

function(key

,

value){

obj[key]

=

value

//

把键值对绑定到obj对象上

}

//

size

方法

获得map容器的个数

this.size

=

function(){

var

count

=

0

for(var

attr

in

obj){

count++

}

return

count

}

//

get

方法

根据key

取得value

this.get

=

function(key){

if(obj[key]

||

obj[key]

===

0

||

obj[key]

===

false){

return

obj[key]

}

else

{

return

null

}

}

//remove

删除方法

this.remove

=

function(key){

if(obj[key]

||

obj[key]

===

0

||

obj[key]

===

false){

delete

obj[key]

}

}

//

eachMap

变量map容器的方法

this.eachMap

=

function(fn){

for(var

attr

in

obj){

fn(attr,

obj[attr])

}

}

}

//模拟java里的Map

var

m

=

new

Map()

m.put('01'

,

'abc')

m.put('02'

,

false)

m.put('03'

,

true)

m.put('04'

,

new

Date())

//alert(m.size())

//alert(m.get('02'))

//m.remove('03')

//alert(m.get('03'))

m.eachMap(function(key

,

value){

alert(key

+"

:"+

value)

})

2.去除map中重复项

var

arr

=

[2,1,2,10,2,3,5,5,1,10,13]//object

//js对象的特性:在js对象中key是永远不会重复的

/*

var

obj

=

new

Object()

obj.name

=

'z3'

obj.age

=

20

//alert(obj.name)

obj.name

=

'w5'

alert(obj.name)

*/

//

1

把数组转成一个js的对象

//

2

把数组中的值,变成js对象当中的key

//

3

把这个对象

再还原成数组

//

把数组转成对象

function

toObject(arr){

var

obj

=

{}

//

私有的对象

var

j

for(var

i=0

,

j=

arr.length

i<j

i++){

obj[arr[i]]

=

true

}

return

obj

}

//

把这个对象转成数组

function

keys(obj){

var

arr

=

[]

//

私有对象

for(var

attr

in

obj){

if(obj.hasOwnProperty(attr)){//YUI底层代码

arr.push(attr)

}

}

return

arr

}

//综合的方法

去掉数组中的重复项

function

uniq(newarr){

return

keys(toObject(newarr))

}

alert(uniq(arr))

希望本文所述对大家的javascript程序设计有所帮助。