最近手上接到一个需求：

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

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

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

因此我必须根据场景动态的切换两个地图=>也就是动态的（切换）加载两个地图的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. [转]C# 之泛型详解

    什么是泛型 我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一个是处理string数据,或者其他自定义的数据类型,但我们没有办法,只能分别写多个方法处理每个数据类型,因为 ...

  2. 廖雪峰Java15JDBC编程-3JDBC接口-2JDBC查询

    我们可以使用JDBC查询来执行select语句. 1. Statement try(Connection conn = DriverManager.getConnection(JDBC_URL, JD ...

  3. 廖雪峰Java11多线程编程-4线程工具类-1ThreadLocal

    多线程是Java实现多任务的基础: Thread ExecutorService ScheduledThreadPool Fork/Join Thread对象代表一个线程:调用Tread.curren ...

  4. Js中的onblur和onfocus事件应用介绍

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用 html页面中,诸如按钮.文本框等可视元素都具有拥有和失 ...

  5. SpringBoot学习笔记（一）：SpringBoot简介

    SpringBoot为什么这么火? 为什么学习SpringBoot?总的来说就是简单. 使用SpringBoot免除了很多配置文件,越来越容易上手. 更轻量级的Web开发,免除了我们以前的server ...

  6. Mysql千万级数据性能调优配置

    背景: 笔者的源数据一张表大概7000多万条,数据大小36G,索引6G,加起来表空间有40G+,类似的表有4张,总计2亿多条 数据库mysql,引擎为innodb,版本5.7,服务器内存256G,物理 ...

  7. 在Linux中使用selenium（环境部署）

    1.安装chrome 用下面的命令安装Google Chrome yum install https://dl.google.com/linux/direct/google-chrome-stable ...

  8. 06-6-es6模板字符串

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【codeforces 507E】Breaking Good

    [题目链接]:https://vjudge.net/contest/164884#problem/D [题意] 给你一张图; 图中有些路是完好的;但有些路还没修好; 先不管路有没有修好; 问你从起点到 ...

  10. Tuxera ntfs软件如何删除干净

    sudo /Library/Filesystems/fusefs_txantfs.fs/Contents/Resources/Support/uninstall-package.sh