<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&region=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) (转)的更多相关文章

  1. 百度地图开发的学习（一）——配置环境&基础地图

    由于项目需求缘故,最近在学习Android地图的开发,所以就记录一下学习过程.最近都会陆续更新啦.目前使用百度地图API的挺多的,所以就先以它为基础学习一些地图的调用. 一.AK的申请 与web开发不 ...

  2. 基础地图Android SDK

    开发者可利用SDK提供的接口,使用百度为您提供的基础地图数据.目前百度地图SDK所提供的地图等级为3-21级,所包含的信息有建筑物.道路.河流.学校.公园等内容. V3.7.0起,地图支持缩放至21级 ...

  3. ArcGIS API For JavaScript 开发（二）基础地图

    有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...

  4. 百度地图 key申请以及基础地图的演示

    之前做过一个拼车的项目,用到了百度地图,如今做电商项目,也遇到了要使用地图,可是刚来这公司不久项目不是自己做的,今天一个同事说定位那边有点问题,所以如今不忙,好好搞下地图,为了以后业务扩展或者出现故障 ...

  5. 高德地图搜索提示获取信息回传activity刷新ui(二)

    应用场景: 在主activity中点击进入到另一个activity搜索提示,获取经纬度,点确定返回到主activity,虽然说需求很奇葩,但是遇到了没办法.. 主要包含两部分,搜索提示+activit ...

  6. 百度地图API提示"230错误 APP Scode校验失败"

    笔者近2天在 Android Studio上玩了一下百度地图,碰到了常见的"230错误 APP Scode校验失败",下面我来介绍一下具体的解决办法. 1.在andriodstud ...

  7. arcgis api 4.x for js之基础地图篇

    arcgis api3.x for js转向arcgis api4.x,我也是最近的3-4个月时间的事情,刚好公司有个webgis项目需要展示三维场景,项目选择arcgis api4.x.我纯碎记录一 ...

  8. Android下百度地图开发（一）：基础地图展示

    最终效果如: 这个需要详细说下,准备工作较为繁琐. 第一步:去百度申请一个开发者账号,新建一个android应用,会让你输入开发者SHA1,目前我只拿到开发版SHA1,发布版那里也填的是这个. 获取方 ...

  9. 百度地图Api进阶教程-基础地图示例1.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 【BZOJ】【3611】【HEOI2014】大工程

    虚树+树形DP 本题100W的点数……不用虚树真的好吗…… Orz ZYF 我的感悟: dp的过程跟SPOJ 1825 FTOUR2 的做法类似,依次枚举每个子树,从当前子树和之前的部分中各找一条最长 ...

  2. Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题

    Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致& ...

  3. iOS开发-委托(Delegate)浅谈

    委托其实并不是OC中才有,C#中也有,不过彼此的理解方式是不一样的,OC中委托是协议的一种,需要使用@protocol声明,委托一般在iOS开发中页面中传值用的比较多.委托是Cocoa中最简单.最灵活 ...

  4. 在Android中使用Android Ksoap2调用WebService

    一.WebService介绍 WebService是基于SOAP协议可实现web服务器与web服务器之间的通信,因采用SOAP协议传送XML数据具有平台无关性,也是成为解决异构平台之间通信的重要解决方 ...

  5. python3 把excel文件合并并保存到csv文件

    具体是这样,某路径下有很多 excel文件,文件名中包含相同关键字的是一类文件,把包含相同关键字的文件合并成一个文件,生成一个新的csv文件 # coding=utf-8 import xlrd im ...

  6. GoLang中面向对象的三大特性

    有过 JAVA 语言学习经历的朋友都知道,面向对象主要包括了三个基本特征:封装.继承和多态.封装,就是指运行的数据和函数绑定在一起,JAVA 中主要是通过 super 指针来完成的:继承,就是指 cl ...

  7. 如何使用动画和精灵表单 Cocos2d-x 2.1.4

            本文实践自 Ray Wenderlich.Tony Dahbura 的文章< How to Use Animations and Sprite Sheets in Cocos2D ...

  8. Angular路由与Nodejs路由的区别

    转自:http://www.imooc.com/qadetail/114683?t=148182 觉得angualr.js的路由是针对于单页面的路由,每次路由发生变化,只是页面的状态发生变化,页面本身 ...

  9. C#.NET常见问题(FAQ)-如何在系统变量中加入新的环境变量

    比如我要将C:\Windows\Microsoft.NET\Framework\v3.5这个目录加入环境变量 则在系统的环境变量中点击Path,编辑,然后加入一个分号";",然后粘 ...

  10. Android中startService的使用及Service生命周期

    Android中有两种主要方式使用Service,通过调用Context的startService方法或调用Context的bindService方法.本文仅仅探讨纯startService的使用.不 ...