最近手上接到一个需求：

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

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

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

因此我必须根据场景动态的切换两个地图=>也就是动态的（切换）加载两个地图的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. 关于python程序在VS code中运行时提示文件无法找到的报错

    经过测试,在设置文件夹目录时,可以找到当前目录下的htm文件,采用with open()语句可以正常执行程序,如下图. 而当未设置当前目录,直接用vscode执行该程序时,就会报错文件无法找到File ...

  2. 【JZOJ2288】【BZOJ1898】【luoguP2579】沼泽鳄鱼

    description 潘塔纳尔沼泽地号称世界上最大的一块湿地,它地位于巴西中部马托格罗索州的南部地区.每当雨季来临,这里碧波荡漾.生机盎然,引来不少游客. 为了让游玩更有情趣,人们在池塘的中央建设了 ...

  3. CobaltStrike进阶篇-批量上线

    前言 当获取一台目标服务器权限时,更多是想办法扩大战果,获取目标凭据并横向进行登陆是最快速的拿权方式.但目标所处环境是否可出网,如何利用CobalStrike进行批量上线,正是本文所要讲述的内容. 获 ...

  4. mysql插入数据显示：Incorrect datetime value: '0000-00-00 00:00:00'

    1. 在进行mysql数据插入的时候,由于mysql的版本为5.7.1,部分功能已经升级,导致在datetime数据类型的影响下出现错误:   数据插入: mysql>insert into j ...

  5. PAT甲级——A1088 Rational Arithmetic

    For two rational numbers, your task is to implement the basic arithmetics, that is, to calculate the ...

  6. 《DSP using MATLAB》Problem 8.8

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  7. Struts2OGNL

    OGNL: 什么是OGNL  Object Graph Navigation Language 开源项目,取代页面中Java脚本,简化数据访问 和EL同属于表达式语言,但功能更为强大  OGNL在St ...

  8. Activiti数据库

    数据库 Activiti的后台是有数据库的支持,所有的表都以ACT_开头. 第二部分是表示表的用途的两个字母标识. 用途也和服务的API对应. 1)     ACT_RE_*: 'RE'表示repos ...

  9. VC++中文件读写汇总

    1,读 A法: CString strFileName = "C:\\dd.txt"; std::ifstream in; std::locale::global(std::loc ...

  10. 物理机多磁盘u盘安装centos

    材料:一枚u盘,一块120G固态硬盘和一块500G的硬盘的华硕笔记本电脑,原系统为windows10 需求:将centos7.5系统安装到固态硬盘,原系统不要了 遇到的问题:开机后进入不了装机界面 解 ...