GoogleMapsV3-----基础地图(自定义消息提示OverlayView) (转)
<html>
<head>
<title>
</title>
<title></title>
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas
{
height: 80%;
}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.9&sensor=false®ion=cn"> </script>
<script type="text/javascript">
var map = null;
var myLableMessage = null;
//【初始化地图】
//===========================================================================================================================
function initialize() {
//构建经纬度点
var latlng = new google.maps.LatLng(30.277925, 120.177597);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
//【自定义OverlayView】
//===========================================================================================================================
function myLable(latlng, text, map) {
this.latlng_ = latlng;
this.text_ = text;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
myLable.prototype = new google.maps.OverlayView(); //您应当继承此类，方法是将叠加层的 prototype 设置为 new OverlayView.prototype
//必须实现三个方法，即 onAdd()、draw() 和 onRemove()。在 draw() 方法中，应放置这些元素。
//在 add() 方法中，您应当创建 DOM 对象，并将其作为窗格的子对象附加。调用有效地图对象的.setMap()
myLable.prototype.onAdd = function () {
var div = document.createElement('DIV');
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
div.innerHTML = this.text_;
this.div_ = div;
var panes = this.getPanes();
panes.floatPane.appendChild(div); ;
}
//每当地图属性更改时都会调用 draw() 方法，该方法可以更改元素的位置，如缩放、中心或地图类型。
myLable.prototype.draw = function () {
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.latlng_);
var div = this.div_;
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';
div.style.width = '100px';
div.style.background = "#ffffff";
div.style.border = "1px solid #85a5b4";
}
//在 onRemove() 方法中，应将对象从 DOM 中删除。清除时调用有效地图对象的.setMap(null)
myLable.prototype.onRemove = function () {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
//===========================================================================================
function LableMessage() {
var lat = document.getElementById("lat_text").value;
var lng = document.getElementById("lng_text").value;
var text = document.getElementById("content_text").value;
var latlng = new google.maps.LatLng(parseFloat(lng), parseFloat(lat));
//如果myLableMessage不为null，则清除原来的
if (myLableMessage != null) { myLableMessage.setMap(null); myLableMessage = null; }
//调用自定义OverlayView
myLableMessage = new myLable(latlng, text, map);
}
function ClearLableMessage() {
if (myLableMessage != null) { myLableMessage.setMap(null); myLableMessage = null; }
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 80%; height: 100%; float: left;">
</div>
<div id="Div1" style="width: 20%; height: 100%; overflow: scroll;">
<hr />
<p style="text-align: center;">
GoogleMapsV3-----基础地图(自定义消息提示OverlayView) (转)的更多相关文章
- 百度地图开发的学习（一）——配置环境&基础地图
由于项目需求缘故,最近在学习Android地图的开发,所以就记录一下学习过程.最近都会陆续更新啦.目前使用百度地图API的挺多的,所以就先以它为基础学习一些地图的调用. 一.AK的申请 与web开发不 ...
- 基础地图Android SDK
开发者可利用SDK提供的接口,使用百度为您提供的基础地图数据.目前百度地图SDK所提供的地图等级为3-21级,所包含的信息有建筑物.道路.河流.学校.公园等内容. V3.7.0起,地图支持缩放至21级 ...
- ArcGIS API For JavaScript 开发（二）基础地图
有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...
- 百度地图 key申请以及基础地图的演示
之前做过一个拼车的项目,用到了百度地图,如今做电商项目,也遇到了要使用地图,可是刚来这公司不久项目不是自己做的,今天一个同事说定位那边有点问题,所以如今不忙,好好搞下地图,为了以后业务扩展或者出现故障 ...
- 高德地图搜索提示获取信息回传activity刷新ui(二)
应用场景: 在主activity中点击进入到另一个activity搜索提示,获取经纬度,点确定返回到主activity,虽然说需求很奇葩,但是遇到了没办法.. 主要包含两部分,搜索提示+activit ...
- 百度地图API提示"230错误 APP Scode校验失败"
笔者近2天在 Android Studio上玩了一下百度地图,碰到了常见的"230错误 APP Scode校验失败",下面我来介绍一下具体的解决办法. 1.在andriodstud ...
- arcgis api 4.x for js之基础地图篇
arcgis api3.x for js转向arcgis api4.x,我也是最近的3-4个月时间的事情,刚好公司有个webgis项目需要展示三维场景,项目选择arcgis api4.x.我纯碎记录一 ...
- Android下百度地图开发（一）：基础地图展示
最终效果如: 这个需要详细说下,准备工作较为繁琐. 第一步:去百度申请一个开发者账号,新建一个android应用,会让你输入开发者SHA1,目前我只拿到开发版SHA1,发布版那里也填的是这个. 获取方 ...
- 百度地图Api进阶教程-基础地图示例1.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- bzoj 1565 [NOI2009]植物大战僵尸 解题报告
1565: [NOI2009]植物大战僵尸 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 2161 Solved: 1000[Submit][Stat ...
- <mvc:annotation-driven />做了什么
<mvc:annotation-driven /> 是一种简写形式,完全可以手动配置替代这种简写形式,简写形式可以让初学都快速应用默认配置方案.<mvc:annotation-dri ...
- C++获得本机所有网卡的IP和MAC地址信息
一台机器上可能不只有一个网卡,但每一个网卡只有一个MAC地址,而每一个网卡可能配置有多个IP地址:如平常的笔记本电脑中,就会有无线网卡和有线网卡(网线接口)两种:因此,如果要获得本机所有网卡的IP和M ...
- OTL翻译(7) -- otl_exception类
otl_exception 这个类是OTL用来抛出异常的类.如果数据库API返回一个非0的错误值,则OTL会将会抛出一个otl_exception的异常.一个otl_exception异常有可能是一个 ...
- C语言获取系统当前时间
C语言获取系统当前时间 time_t -- 时间类型 struct tm -- 时间结构 time(&now)函数获取当前时间距1970年1月1日的秒数,以秒计数单位. localtime ( ...
- Android中的树状(tree)列表
树状列表前端挺常用的,还有人专门写过Ztree,Android中有的时候也需要使用到树状列表,上篇文章写了一下ExpandableListView,ExpandableListView最多支持两级结构 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- scala 学习笔记三 闭包
闭包是一个函数,返回值依赖于声明在函数外部的一个或多个变量. 闭包通常来讲可以简单的认为是可以访问一个函数里面局部变量的另外一个函数. 如下面这段匿名的函数: val multiplier = (i: ...
- angular6 NgModule中定义模块module
用这个@NgModule()这个decorator ,放在一个class的上面,这个class一个一个module了 @NgModule() 里面的参数是一个对象,用来配置的,声明这个module里面 ...
- wstring to wchar_t*
If you want to convert from std::wstring to const WCHAR* (i.e. the returned pointer gives read-onl ...