作者：最爱BLEU | 来源：互联网 | 2023-09-15 12:01
任务描述：2月2日是除夕，2月14立马来！即将到来的情人节，你想送TA一份什么礼物呢？不如，在你们居住的地方，画个大大的桃心，表达你对TA的爱意吧！如何实现：
任务描述：
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"
>
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
©
酸奶小妹
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
>
京公网安备 11010802041100号