文档章节

腾讯地图标记点击事件

猪刚烈
 猪刚烈
发布于 2014/10/12 11:49
字数 181
阅读 62
收藏 0
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>腾讯地图</title>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=AMZBZ-NBWAR-SCKWS-WSFQU-TZ4R6-YWBEV"></script>
<script>
	var init = function() {
		var map_center = new qq.maps.LatLng(39.90927537429095,116.39838695526123);
		var map = new qq.maps.Map(document.getElementById("container"), {
			center : map_center,
			zoom : 14,
			panControl : true,
			zoomControl : true,
			zoomControlOptions : {
				style : qq.maps.ZoomControlStyle.SMALL
			}
		});

		var marker = new qq.maps.Marker( {
			map : map,
			position : map_center
		});

		var infoWin = new qq.maps.InfoWindow( {
			map : map
		});

		qq.maps.event.addListener(
				marker,
				'click',
				function(evt) {
					infoWin.open();
					infoWin.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">这里是天安门</div>');
					infoWin.setPosition(evt.latLng);
		        });
        
	 }
</script>
	</head>
	<body onload="init()">
		<div style="width: 603px; height: 300px; padding-top: 80px; padding-left: 80px;" id="container"></div>
	</body>
</html>


效果如图:

由于腾讯地图接口变更,这是之前的写法,现在的qq.maps 都改为了soso.maps

具体参考:http://api.map.soso.com/doc/example.html?sample-overlay-marker-click#5map#5map


作者:itmyhome

出处:http://blog.csdn.net/itmyhome1990/article/details/39551131






本文转载自:http://blog.csdn.net/itmyhome1990/article/details/39551131

共有 人打赏支持
猪刚烈
粉丝 22
博文 708
码字总数 110
作品 1
海淀
程序员
求教VB.NET关于自己写的控件添加鼠标事件问题

自己引用了一个地图控件Gmap,由于其未添加marker的点击事件,所以需要自己写鼠标事件 新建一个GGmarker类继承于地图控件的GmarkerGoogle public class GGmarker :inherits GmarkerGoogle ...

vv_zhao
2017/08/11
31
0
基于Html+js实现的瓦片式的Webgis栅格地图管理平台

基于Html+js实现的Webgis栅格平台 成都领君科技提供的基于HTML5+js开发的瓦片式地图发布平台,适用于几乎所有浏览器(IE6+,遨游,火狐,搜狗,谷歌,360,世界之窗,Opera等)。功能模块包括如...

成都领君科技
2012/04/04
0
0
高德地图(AMap)JavaScript API的使用

申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: 创建地图容器 在页面body里你想展示地图的地方创建一个div 容器,并指定id标识: 指定容器大小...

驛路梨花醉美
2016/12/22
124
0
使用Javascript 实现 分享到 新浪微博 QQ 空间等

使用Javascript 实现 分享到 新浪微博 QQ 空间等 分类: JS2012-09-10 15:34 8196人阅读 评论(1) 收藏 举报 新浪微博javascriptqqurlfunction腾讯 我们阅读博客的时候经常会用到这样功能,当...

蜗牛奔跑
2015/07/30
0
0
基于ip的手机地理定位

现在lbs服务比较火,基本上都需要定位用户的地理信息,用户地理信息一般是通过gps来定位实现的,那么假如 用户的gps坏了,或者没有开启,那么怎么获得用户的地理信息的呢?替代的办法就是可以...

晨曦之光
2012/03/01
567
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

centos7安装redis及开机启动

配置编译环境: sudo yum install gcc-c++ 下载源码: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 解压源码: tar -zxvf redis-3.2.8.tar.gz 进入到解压目录: cd redis-3......

hotsmile
39分钟前
0
0
Confluence 6 数据库和临时目录

数据库 所有的其他数据库,包括有页面,内容都存储在数据库中。如果你安装的 Confluence 是用于评估或者你选择使用的是 Embedded H2 Database 数据库。数据库有关的文件将会存储在 database...

honeymose
53分钟前
1
0
day62-20180820-流利阅读笔记

1.今日导读 2.带着问题听讲解 3.新闻正文(中英文对照) 4.重点词汇 5.拓展内容

aibinxiao
今天
0
0
分布式锁实现及对比

一、问题介绍 日常工作中很多场景下需要用到分布式锁,例如:任务运行(多个节点同一时刻同一个任务只能在一个节点上运行(分片任务除外)),交易接受(前端交易请求发送时,可能由于两次提...

yangjianzhou
今天
6
0
【AI实战】快速掌握TensorFlow(二):计算图、会话

在前面的文章中,我们已经完成了AI基础环境的搭建(见文章:Ubuntu + Anaconda + TensorFlow + GPU + PyCharm搭建AI基础环境),以及初步了解了TensorFlow的特点和基本操作(见文章:快速掌握...

雪饼
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部