专栏首页Python程序员杂谈在网站中加入google地图显示公司位置

在网站中加入google地图显示公司位置

前几天出去谈了一个网站修改的需求,需求中客户提到要再网站上加上一个地图,显示公司所在位置,问能不能做。当时想了一瞬,答道:能,不过需要研究一下,这个东西比较复杂。(谈需求嘛,不能说这个东西简单的很,那样谁还给钱)

其实这个玩意还真没看过,只是觉得人家GG牛B如斯,况且这个地图的api已经开放很久了,应该针对开发者比较人性化,于是回来一看,果然如此,使用起来虽然不能说十分简单,也可以称得上灰常简单。下面给一个入门的代码:

.. code:: html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> Demo </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"></script>
<script type="text/javascript">
//不使用JQuery 则在 body 加 onload=initialize()
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.878378,116.673651), 13);

var customUI = map.getDefaultUI();
// Remove MapType.G_HYBRID_MAP
customUI.maptypes.hybrid = false;
map.setUI(customUI);

function createMarker(point, number) {
    var marker = new GMarker(point);
    marker.openInfoWindowHtml("胡阳在此");
    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("胡阳在此");
    });
    return marker;
}

var point = new GLatLng(39.878378,116.673651);
 map.addOverlay(createMarker(point, 1));
}
</script>
 <body  onload="initialize()">
  <div id="map_canvas" style="width:300px; height:300px"></div>
 </body>
</html>

因为没有申请api密钥,所以会弹出提示。如果大家需要的话可以根据提示到相关网址上申请。 另外,大家不要追踪我的位置哦。:-) google地图API文档:http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html#GMap2

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ROS_Kinetic_16 ubuntu中安装使用Matlab和ROS

    参考网址:http://cn.mathworks.com/hardware-support/robot-operating-system.html?reques...

    zhangrelay
  • 补习系列(12)-springboot 与邮件发送

    SMTP 是 Simple Mail Transfer Protocol 的简称,即简单邮件传输协议,是发送协议。 它定义了一组从源地址到目的地址传输邮件的规范...

    美码师
  • 在Ubuntu 18.04 LTS试用ROS Melodic版机器人操作系统

    在Ubuntu 18.04 LTS安装ROS Melodic版机器人操作系统,参考如下链接:

    zhangrelay
  • 2015-2018机器人操作系统(ROS)及其应用暑期学校资料汇总 ROS Summer School 持续更新

    2018年ROS暑期学校报名链接:http://www.huodongxing.com/go/ros2018

    zhangrelay
  • 2.3.2 基于bootstrap框架写加法器

    什么是bootstrap?一套用js和CSS编写的框架模板,自己组装一下就可以编写比较美观的网页。官当介绍是组件库:

    周星星9527
  • ROS_Kinetic_25 在ubuntu16.04使用Leap_motion并作为手势输入控制Gazebo中的机器人

    1. http://v.youku.com/v_show/id_XMTU3NDg2NzMwOA==.html

    zhangrelay
  • 使用FindBugs插件检查Android代码

    用户1205080
  • 重新理解经济

    近日重读了《经济机器是怎样运行的》,再结合现在的时事,顿时明白了好多东西。拂去纷纷扰扰,借由这篇文章从一个小白的角度重新理解经济。

    哒呵呵
  • 2.3.1 基于easyUI框架写加法器

    easyUI是一个第三方控件库,内容很全面。比如我们做一个加法计算程序,打开其官网,找到示例修改到自己想要的结果。先找到其相关内容:

    周星星9527
  • 计算机控制技术课程简介与资料

    国防科学技术大学: http://www.icourses.cn/coursestatic/course_6563.html

    zhangrelay

扫码关注云+社区

领取腾讯云代金券