javascript 调用谷歌地图API 输入地址 点击弹出悬浮信息

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
    <script type="text/javascript">
        var geocoder;
        var map;
        //实际查询地址
        //var query = "辽宁沈阳文化路三号巷11号";
        //var query = "东北大学北门";
        //显示名称
        //var display = "<b>单位: </b>东北大学";
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var myOptions = {
                zoom : 17,//缩放比例
                //地图类型 •MapTypeId.ROADMAP •MapTypeId.SATELLITE
                //•MapTypeId.HYBRID •MapTypeId.TERRAIN
                mapTypeId : google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);
            codeAddress();
        }
        function codeAddress() {
            var address = document.getElementById("address").value;;
            //地址解析
            geocoder.geocode({
                ‘address‘ : address
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    //依据解析的经度纬度设置坐标居中
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map : map,
                        position : results[0].geometry.location,
                        title : address,
                        //坐标动画效果
                        animation : google.maps.Animation.DROP
                    });
                    var display = "地址: " + results[0].formatted_address;
                    var infowindow = new google.maps.InfoWindow({
                        content : "<span style=‘font-size:11px‘><b>名称: </b>"
                                + address + "<br>" + display + "</span>",
                        //坐标偏移量,一般不用修改
                        pixelOffset : 0,
                        position : results[0].geometry.location    

                    });
                    //默认打开信息窗口,点击做伴弹出信息窗口
                    infowindow.open(map, marker);
                    google.maps.event.addListener(marker, ‘click‘, function() {
                        infowindow.open(map, marker);
                    });
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }
    </script>    

</head>  

<body>
 <body onload="initialize()">
        <div id="map_canvas" style="width: 320px; height: 480px;"></div>
 <div>
    <input id="address" type="textbox" value="北京">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
    </body>
</body>
</html>  
时间: 2024-10-29 19:09:37

javascript 调用谷歌地图API 输入地址 点击弹出悬浮信息的相关文章

使用asp.net调用谷歌地图api

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>//在这里要注意js引入的先后顺序 <link href="Mapjs/jquery.ui.base.css" rel="stylesheet" type="text/css" /> <link href="Mapjs/j

JavaScript基础--小案例:在网页指定位置弹出错误信息(十二)

案例分析:点击按钮后,在网页上指定区域,提示错误信息!5秒后,错误信息提示自动消失! 1 <script languag="javascript" type="text/javascript"> 2 var clearId; 3 function test(){ 4 document.getElementById("showMsg").style.cssText="width:200px;height:50px;left:6

ionic 调用百度地图API,并定位当前位置示例

首先,可以参考JS版本的百度地图API示例. 由于在ionic程序中,我们一般使用的ES5 或 ES6 或者是Typescript. 这与JS 还有有一些区别的.所以,在我们的程序中,代码与官方示例代码格式上不完全相同. 下面,简单说明一下如何在 ionic 程序中 调用 百度地图API. 1. 在ionic程序中,定位到文件: \src\index.html.  添加如下代码 , 注意将"您的密钥" 替换成 您申请的密钥 <script type="text/java

C#调用百度地图 api

转  http://blog.csdn.net/kkkkkxiaofei/article/details/8663377 这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不能直接复制就运行.在实现之前肯定要加载地图,先放一个webbroser控件,然后如下: [csharp] view plaincopyprint? private void Form1_Load(object sender, EventArgs e) { string str_url = Appli

HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地(转)

HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地 我是应用在微信中,自定义菜单,菜单直接链接到这个HTML5页面,获取当前位置后,页面中定好目的地,这样打开页面后直接进入导航页面 可以省下先发送位置信息后,点确定再出导航,省一步, <!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"> <meta name="viewpor

C#调用百度地图API入门&amp;解决BMap未定义问题

本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于Android的百度地图,其实原理都差不多,希望文章对你有所帮助吧! 一. C#显示百度地图 使用C# Winform显示百度地图主要包括两个步骤: 1.调用百度地图API,通过申请的密钥AK访问JavaScript版本地图: 2.再在C#中webBrowser浏览器控件中访问JS文件,显示地图到窗口.

调用百度地图Api实现的查看地图功能的小插件

1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : city, address : address }); 3.依赖 需自行引入jquery以及layer.js(弹出框插件) 4. 局限 各模块之间耦合度过于紧密,插件化程度太低,依赖性太强 5. demo下载 地址 :http://pan.baidu.com/s/1pJAxOnT 6. 源码预览

高德地图api实现地址和经纬度的转换(python)

利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo/ 1.利用python第三方库requests实现 Requests库文档地址:http://www.python-requests.org/en/master/ 1 #!/usr/bin/env python3 2 #-*- coding:utf-8 -*- 3 ''' 4 利用高德地图api实

谷歌地图api访问失败

在非外网情况下,我们调用谷歌api会出现加载不到地图的现象,此时可以换一下域名试试也许就好了 比如我自己访问api时时这样写的: https://maps.googleapis.com/maps/api/js?key=. . . &sensor=true 此时访问时是加载不到地图的. 如果我将maps.googleapis.com换成ditu.google.cn就可以正常加载地图了, 或是在https://maps.googleapis.com/maps/api/js?后面加上v=3.exp也就