最近手上接到一个需求：

国外的域名访问，显示谷歌地图

国内的域名访问，显示百度地图

切换中英文的时候，中文->显示百度地图，英文->能显示谷歌地图就显示谷歌地图，不能显示（报错）就显示百度地图。

因此我必须根据场景动态的切换两个地图=>也就是动态的（切换）加载两个地图的js

1. 首先我们的项目是部署在https上，因此不论我是加载百度地图还是谷歌地图都必须以https的形式；

2. 其次谷歌地图的经纬度的计算需要自己去找网址去查；

3. 再次百度地图的动态加载需要添加callback参数才可以支持；

4. 再其次谷歌地图的动态加载失败事件不走ajax的error方法，经百度浏览器只会选择“静静的失败”；

5. 最后地图的动态加载必须放在onload方法里而不是ready方法里等等

真的是步步维艰。也是在网上查阅了很多资料才慢慢解决。

以下是最终部分代码：

<script>

    function loadBaiduScript() {

        let script = document.createElement("script");

        script.src = 'https://api.map.baidu.com/api?v=2.0&ak=qWmCfqDAdPBzy3YoHxGnimKT&s=1&callback=getBaiduMap';

        document.body.appendChild(script);

    }

    function getBaiduMap(){

        $.getScript('js/map_baidu.js')

    }

    function loadGoogleScript(){

        let script = document.createElement("script");

        script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyA-EyYveZrg9ipdZIcugx9-P4PZWLjxVmw&callback=getGoogleMap';

        document.body.appendChild(script);

        script.onerror=function(){               //拉取google地图报错

            document.body.removeChild(script);

            loadBaiduScript();

        }

    }

    function getGoogleMap(){

        $.getScript('js/map_google.js')

    }

    window.onload = function(){

        let lang = navigator.language;    //获取浏览器的默认语言

        if(lang=="zh-CN" || lang=='zh'){

            loadBaiduScript()

        }else{

            loadGoogleScript()

        }

    };

</script>

　

另外Google地图的话需要做的准备活动可能多些：

1. 申请key

i  进入Google官网 => https://www.google.com.hk/ ，申请一个谷歌账号（如果没有）

ii  进入Google APIs Console页面 => https://code.google.com/apis/console/

iii 创建项目->启用API和服务中选 Maps JavaScript API->点击启用->点击凭据tab->选择API秘钥作为凭据->生成一个API秘钥

 

2.找地址的经纬度（以下是随便找了一个地址）

3.参考代码

<!DOCTYPE html>

<html>

  <head>

    <link rel="stylesheet" href="/maps/documentation/javascript/cgc/demos.css">

  </head>

  <body>

    <div id="map"></div>

    <script>

      function initMap() {

        var myLatLng = {lat: -25.363, lng: 131.044};   //lat:经度  lng：纬度  从参考文档里查找经纬度的网站查到然后替换一下就行

        var map = new google.maps.Map(document.getElementById('map'), {

          center: myLatLng,

          zoom: 4       //zoom具体数值代表多大范围可从以下参考文档里的zoom设置网址查找即可

        });

        var marker = new google.maps.Marker({

          map: map,

          position: myLatLng,

          title: 'Hello World!'

        });

      }

    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>  //key从以上自己用google账号申请的key替换一下就行

  </body>

</html>

　　

参考文档：

1.google地图找经纬度
 
2.google地图设置zoom
 
3.google地图设置language
 
4.生成Google地图基本例子
https://cloud.google.com/maps-platform/maps/

 
5.定制化开发Baidu地图
http://api.map.baidu.com/lbsapi/creatmap/index.html
 
6.Baidu地图的图标地址
 
7.异步加载Baidu地图的例子
https://blog.csdn.net/dr_yining/article/details/70475952
 
 
 

js 百度地图和谷歌地图的选择的更多相关文章

  1. Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

    原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Wi ...

  2. 谷歌地图聚合点使用（GoogleMaps MarkerCluster）

    我们有时候需要观察地图 不同地方数据的所在范围和分布密集情况,热力图和聚合点的使用无疑是最好的选择. 1.首先说说百度地图,只做国内的地图可以使用百度地图的海量点和热力图还是蛮好用的. a.海量点的最 ...

  3. 如何在WindowsPhone Bing Map控件中显示必应中国中文地图、谷歌中国中文地图。

    原文:如何在WindowsPhone Bing Map控件中显示必应中国中文地图.谷歌中国中文地图. 最近正好有点业余时间,所以在做做各种地图.Bing Map控件本身就能显示必应地图,但是很遗憾微软 ...

  4. .NET开发笔记（二十三） 谷歌地图下载

    关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...

  5. C#版谷歌地图下载器设计与实现

    关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...

  6. Vue3.0中引入地图（谷歌+高德+腾讯+百度）

    1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...

  7. Maplace.js – 小巧实用的 jQuery 谷歌地图插件

    Maplace.js是一个小的显示谷歌地图的 jQuery 插件,帮助你把谷歌地图嵌入到你的网站,快速在地图位置上创建标记和控制菜单.它需要 jQuery 和谷歌地图 API v3 支持,所以这两个都 ...

  8. Odoo Website 替换 谷歌地图为 百度地图

    由于众所周知的原因,国内使用谷歌地图是件非常痛苦的事,更为接地气的做法是替换为百度地图. 模块地址参见群公告. 演示地址:http://timesup.cn:8069

  9. JS 百度地图导航

    上一篇文章中我们就简单的学习了HTML5 地理定位,那么今天告诉大家我在项目中遇到的一个问题吧,就是怎么实现点击一个按钮就可以调到百度地图,并且获取到你当前的位置,并且导航到指定的地方去. 不想看步骤 ...

随机推荐

  1. [转]使用TortoiseGit处理代码冲突

    场景一  user0 有新提交 user1 没有pull -> 写新代码 -> pull -> 提示有冲突   解决办法一 -> stash save(把自己的代码隐藏存起来) ...

  2. Python-包与常用模块(2)

    目录 包 导入包内包 相对导入和绝对导入 注意事项 time模块 datetime模块 random模块 argparse 模块 configparser模块 hashlib模块和hmac模块 typ ...

  3. VS2010-MFC（对话框：创建对话框类和添加控件变量）

    转自:http://www.jizhuomi.com/software/153.html 前两讲中讲解了如何创建对话框资源.创建好对话框资源后要做的就是生成对话框类了.生成对话框类主要包括新建对话框类 ...

  4. 杂项-公司：Apple

    ylbtech-杂项-公司:Apple 苹果公司(Apple Inc. )是美国的一家高科技公司.由史蒂夫·乔布斯.斯蒂夫·沃兹尼亚克和罗·韦恩(Ron Wayne)等人于1976年4月1日创立,并命 ...

  5. Android之selector选择器的使用

    1.selector简介 selector中文的意思选择器,在Android中常常用来作组件的背景,实现组件在不同状态下不同的背景颜色或图片的变换.使用十分方便.主要是用来改变ListView和But ...

  6. <input> type 属性

    单行文本域 语法格式:<input  type = “text” 属性 = “值” /> 常用属性 1  name:文本框的名字.命名规则是:可以包含字母.数字.下划线,只能以字母开头. ...

  7. Spring MVC(八)--控制器接受简单列表参数

    有些场景下需要向后台传递一个数组,比如批量删除传多个ID的情况,可以使用数组传递,数组中的ID元素为简单类型,即基本类型. 现在我的测试场景是:要从数据库中查询minId<id<maxId ...

  8. 《DSP using MATLAB》Problem 8.25

    用match-z方法,将模拟低通转换为数字低通 代码: %% --------------------------------------------------------------------- ...

  9. leetcode 75 Sorted Colors

    两种解法 1)记录0和1的个数 然后按照记录的个数将0和1重新放入原数组,剩下的补2 2)双指针left,right left表示0~left-1都为0,即i之前都为0 right表示right+1~ ...

  10. NOIP2018提高组初赛选讲

    说实话,这次的初赛比上一次的要简单. 不过还有些变态的题目. 在一条长度为1 的线段上随机取两个点,则以这两个点为端点的线段的期望 长度是( ). A. 1 / 2 B. 1 / 3 C. 2 / 3 ...