Link to home
Start Free TrialLog in
Avatar of Peter Chan
Peter ChanFlag for Hong Kong

asked on

Example code

Hi,
Is there any C# example code (or other kind of codes) to be able to show a relevant map part from Baidu, per one given city/place location?
Avatar of David Johnson, CD
David Johnson, CD
Flag of Canada image

Avatar of Peter Chan

ASKER

Sorry, using these
<head id="Head1" runat="server">
	<title>Test</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    ...
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    </script>

    <div id="allmap"></div>
    </form>
</body>

Open in new window

I cannot show the relevant map.
first problem I can see is that you need to have the "allmap"  div defined before your javascript executes
so move things around like this

<div id="allmap"></div>
<script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    </script>

Open in new window

After doing this there is a message that comes up, but I do not know Chinese so I do not know what it says. Something about the api key.
Good day Karen
I've put the codes and have re-deployed the project but I still do not see the map.
do you get the following message? I do not know what it says

User generated image
I do not get that and the message says "It is not allowed to use Baidu Map API, due to invalid Baidu LBS key given."
ok, that makes it hard for me to test...
I think it is there, but you just cannot see it
try

<div id="allmap" style="width:200px;height:200px"></div>

Open in new window

I put this

<div id="allmap" style="width:200px;height:200px"></div>

Open in new window


and re-deploy the page but I still do not see the map. Here is my URL

http://my-friend.co/RegRec2?id=18&user_abbr=mc2&readonly=n
okay, at the moment it is behind your main div
so try

<div id="allmap" style="width:500px;height:500px;border: 1px solid black;display:block"></div>

Open in new window


so we can at least see where the map is supposed to go
Now the area is being shown below.
http://my-friend.co/RegRec2?id=18&user_abbr=mc2&readonly=n

How to ensure we can link to Baidu map.
you still have your javascript at the top of the page, you need to move it to the bottom so it goes after the allmap div
or if you don't want to move it, you could change it to

jQuery(document).ready(function () {
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
});

Open in new window

Sorry, I think it could be a problem to replace
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    </script>

Open in new window

with
jQuery(document).ready(function () {
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
});

Open in new window

right?
ASKER CERTIFIED SOLUTION
Avatar of Karen
Karen
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial