在web中插入英文版地图的方法

相信大家都有用过 web 中百度的地图插入功能，有不会的小伙伴可以参考一下：http://api.map.baidu.com/lbsapi/creatmap/
但是对于英文网站来说，不能在页面中使用中文地图吧，那样太掉档了。

1、利用高德地图。百度没有英文版的地图，后来才想到专业做地图的高德地图。去其官网查询相关的 api 调用方法。高德地图没有像百度那样的简单操作界面。需要根据文档去搭配使用。高德地图 api 地址：http://lbs.amap.com/api/javascript-api/example/a/0106-2/
里面有英文版，但又没有定位图标，可以参考开发指南：http://lbs.amap.com/api/javascript-api/guide/draw-on-map/infowindow/ 里面的窗体的介绍。

现在可以把这两个功能整合在一起了，但还有一个问题，就是准确的经纬度定位问题需要解决了。如果不会请问度娘“高德地图坐标拾取器”。

<div id="mapContainer"></div>
<div id="btnDiv">
    <input id="enMapBtn" type="button" value="显示英文底图" />
    <input id="zh_enMapBtn" type="button" value="显示中英文对照底图" />
    <input id="zhMapBtn" type="button" value="显示中文底图" />
</div>
<script
    type="text/javascript"
    src="http://webapi.amap.com/maps?v=1.3&key=你申请的key值"
></script>
<script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        //二维地图显示视口
        view: new AMap.View2D({
            //地图中心点
            center: new AMap.LngLat(113.908693, 22.556899),
            //地图显示的缩放级别
            zoom: 18,
        }),
    });
    //地图中添加地图操作ToolBar插件
    map.plugin(["AMap.ToolBar"], function () {
        var toolBar = new AMap.ToolBar();
        map.addControl(toolBar);
    });
    //地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
    addMarker();
    //添加marker标记
    function addMarker() {
        map.clearMap();
        var marker = new AMap.Marker({
            map: map,
            //位置
            position: new AMap.LngLat(113.908693, 22.556899),
            //复杂图标
            icon: "http://webapi.amap.com/images/0.png",
        });
        //鼠标点击marker弹出自定义的信息窗体
        AMap.event.addListener(marker, "click", function () {
            infoWindow.open(map, marker.getPosition());
        });
    }
    //实例化信息窗体
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,
        //自定义窗体
        content: createInfoWindow(
            "CMK&nbsp;&nbsp;",
            "<img src='http://localhost/gtd/Public/home/images/logo.png' style = 'position:relative;float:left;margin:0 5px 5px 0;' > 地址"
        ),
        offset: new AMap.Pixel(16, -45), //-113, -140
    });
    //构建自定义信息窗体
    function createInfoWindow(title, content) {
        var info = document.createElement("div");
        info.className = "info";
        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "400px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.src = "http://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;
        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);
        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = "white";
        middle.innerHTML = content;
        info.appendChild(middle);
        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = "relative";
        bottom.style.top = "0px";
        bottom.style.margin = "0 auto";
        var sharp = document.createElement("img");
        sharp.src = "http://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }
    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
    map.setLang("en");
    /*document.getElementById('enMapBtn').onclick = function(){
     map.setLang('en');
     };
     document.getElementById('zh_enMapBtn').onclick = function(){
     map.setLang('zh_en');
     };
     document.getElementById('zhMapBtn').onclick = function(){
     map.setLang('zh_cn');

     };*/
</script>

关键代码：

map.setLang("en");

2、高德地图只支持国内地区，利用谷歌地图可以支持查看国外地区。

新建一个 map.php 利用框架的形式 include 中进入，include 时传入相应的值即可。

<?php
error_reporting(E_ALL ^ E_NOTICE);
$jwd = $_GET['jwd'] ? $_GET['jwd'] : '纬度,经度';
$title = $_GET['title'] ? $_GET['title'] : 'William siteapge';
$jwdA = explode(',', $jwd);
$wd = $jwdA[0];
$jd = $jwdA[1];
?>

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script
            type="text/javascript"
            src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"
        ></script>
        <script
            type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?sensor=true&language=en-us&key=AIzaSyDO-TI0nPW2O7VTCRuhHDQ-MocQpckas6U"
        ></script>
        <script type="text/javascript">
            $(function () {
                initialize();
            });

            var map = null;
            //地图初始化
            function initialize() {
                var latlng = new google.maps.LatLng(<?php echo (float)$wd;?>, <?php echo (float)$jd;?>); //创建坐标对象，定义经纬度值
                var myOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //在指定的HTML容器中创建新的地图


                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "<?php echo $title;?>"
                });

                var contentString = '<div id="content">' + '<div>' +
                    '</div>' +
                    '<h2><?php echo $title;?></h2>' +
                    '</div>';
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
            }
        </script>
    </head>
    <body style="margin:0;padding:0">
        <div style="width:820px;height:350px; float: left;">
            <!--谷歌地图容器-->
            <div
                style="width: 820px;; height: 350px; border: 1px solid #C0C0C0;"
                id="map_canvas"
            ></div>
        </div>
    </body>
</html>