原文:

 

任务描述：

　　2月2日是除夕，2月14立马来！即将到来的情人节，你想送TA一份什么礼物呢？

　　不如，在你们居住的地方，画个大大的桃心，表达你对TA的爱意吧！　　

 

如何实现：

　　给地图增加一个事件监听，addEventListener；

     当鼠标点击地图时，首先获取改点坐标，其次在改点坐标处增加一个红色标注。

 

图示：

 

运行代码，请点击。

 

代码如下：

 

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

>

<

html

xmlns

="http://www.w3.org/1999/xhtml"

>

<

head

>

<

meta

http-equiv

="Content-Type"

content

="text/html;charset=UTF-8"

/>

<

title

>

酸奶小妹——百度地图API学习

</

title

>

<

meta

http-equiv

="X-UA-Compatible"

content

="IE=EmulateIE7"

/>

<

script

type

="text/javascript"

src

="http://api.map.baidu.com/api?key=25f144bb4491f54b83a7a7b39198c11e&v=1.1&services=ture"

></

script

>

<

link

rel

="stylesheet"

type

="text/css"

href

="static/base.css"

media

="screen"

/>

</

head

>

<

body

>

<

div

class

="wrapper"

>

<

div

class

="header"

>

<

h1

>

新增marker

</

h1

>

<

p

><

span

class

="f-r"

>

2011-01-14

</

span

>

任务描述:

</

p

>

<

p

>

鼠标点击地图，即可新增一个标注。

</

p

>

</

div

>

<

div

class

="container clearfix"

>

<

div

id

="mapBox"

class

="myMap f-l"

></

div

>

</

div

>

<

div

class

="info"

>

<

p

>

谷歌广告:

</

p

>

<

div

style

="clear:both"

>

<

script

type

="text/javascript"

>

<!--

google_ad_client

=

"

ca-pub-5845154460812025

"

;

/*

横幅728&#42;90

*/

google_ad_slot

=

"

8606107205

"

;

google_ad_width

=

728

;

google_ad_height

=

90

;

//

-->

</

script

>

<

script

type

="text/javascript"

src

="http://pagead2.googlesyndication.com/pagead/show_ads.js"

>

</

script

>

</

div

>

</

div

>

<

div

class

="footer"

>

<

span

class

="f-r"

>

COPYRIGHT

&copy;

酸奶小妹

</

span

>

<

span

>

友情链接:

<

a

target

="_blank"

href

="http://openapi.baidu.com/map/index.html"

>

百度地图API

</

a

>

|

<

a

target

="_blank"

href

="http://tieba.baidu.com/f?kw=%B0%D9%B6%C8%B5%D8%CD%BCapi&fr=tb0_search&ie=utf-8"

>

百度地图API贴吧

</

a

>

|

<

a

target

="_blank"

href

="http://map.baidu.com/"

>

百度地图

</

a

>

|

<

a

target

="_blank"

href

="http://www.cnblogs.com/milkmap/"

>

酸奶小妹

</

a

>

</

span

>

</

div

>

</

div

>

</

body

>

<

script

type

="text/javascript"

>

var

map

=

new

BMap.Map(

"

mapBox

"

);

//

创建map

var

point

=

new

BMap.Point(

116.411053

,

39.950507

);

//

确定中心点

map.centerAndZoom(point,

16

);

//

初始化地图map,设置中心点和地图级别。

map.addEventListener(

"

click

"

,

function

(e) {

point

=

new

BMap.Point(e.point.lng, e.point.lat);

var

marker

=

new

BMap.Marker(point);

map.addOverlay(marker);

});

</

script

>

</

html

>