最近手上接到一个需求：

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

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

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

因此我必须根据场景动态的切换两个地图=>也就是动态的（切换）加载两个地图的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. Xstream 解析xml文件内容

    刚刚接手的一个项目,接到一个对接用户数据的需求,对方使用的是xml格式来传输文件,特此记下解析该类文件的方法 public interface XmlResolver<T> { XStre ...

  2. leetcode-第5周双周赛-1136平行课程

    方法一: class Solution(object): def minimumSemesters(self, N, relations): """ :type N: i ...

  3. ThinkPHP 删除数据

    ThinkPHP删除数据使用delete方法,例如: 直线电机价格 $Form = M('Form'); $Form->delete(5); 表示删除主键为5的数据,delete方法可以删除单个 ...

  4. 字符串+dp——cf1163D好题

    很好的题(又复习了一波kmp) /* dp[i,j,k]:到s1的第i位,匹配s2到j,s3到k的最优解 */ #include<bits/stdc++.h> using namespac ...

  5. 容斥原理——hdu2204dfs深搜

    /* 枚举素数幂p 然后求k^p<=n 的 k的个数 因为 k^p1*p2==k^p2*p1,所以这两种情况是多算的,所以要进行容斥 减去两个质数幂相乘的,再加上三个质数幂相乘的 因为2*3*5 ...

  6. slam课程

    美国宾夕法尼亚大学最近有录制一套 无人机视觉定位导航相关的视频课程,2019年3月份在YouTube上更新完毕,质量非常高,名字叫Robotics,视频课程列表:https://www.youtube ...

  7. LUOGU P2949 [USACO09OPEN]工作调度Work Scheduling (贪心)

    解题思路 明明一道比较简单的贪心结果挂了好几次23333,就是按照时间排序,然后拿一个小根堆维护放进去的,如果时间允许就入队并且记录答案.如果不允许就从堆里拿一个最小的比较. #include< ...

  8. (转)剖析Linux文件编码的查看及修改

    Linux文件编码的查看和修改都有不止一种做法,如果你需要在Linux中操作windows下的文件,那么很可能会经常遇到文件编码转换的问题,如何进行这项工作,也应该是经常工作在双系统下的操作者的必须掌 ...

  9. MyEclipse使用总结——MyEclipse安装maven插件[转]

    打开 myeclipse, MyEclipse -->  Preferences -->Maven4MyEclipse 确定jdk是可用的 选择自己安装的maven: 点击Add选中我们的 ...

  10. Class绑定v-bind:class

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...